Merge pull request #1027 from Safelite/feature/CSR-1073

Feature/csr 1073

src/constants/endpoints.js

@@ -78,6 +78,10 @@ const endpoints = {
         url: "/parts/api/v1/parts/mobile-fee",
         method: "GET",
     },
+    GetServiceabilityDetails: {
+        url: "/location/api/v1/location/serviceability-details",
+        method: "GET",
+    },
     GetSupportingItems: {
         url: "/parts/api/v1/parts/supporting-items",
         method: "POST",

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",

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

src/digital-components/modal/modal.vue

@@ -26,10 +26,10 @@
                     <slot></slot>
                 </div>
                 <div class="modal-footer px-5 py-4">
-                    <buttonMain
+                    <modalButtonMain
                         isPrimary
                         class="w-100"
-                        ref="buttonMain"
+                        ref="modalButtonMain"
                         loaderColor="white"
                         :buttonText="footerButtonText"
                         @click-event="validateAndEmit"
@@ -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 } from "vee-validate";
 
@@ -79,7 +79,7 @@ export default {
             }
         },
         resetButtonStyle() {
-            this.$refs.buttonMain.resetButtonStyle();
+            this.$refs.modalButtonMain.resetButtonStyle();
         },
         onModalOpened() {
             this.onModalOpenedCallback?.();
@@ -106,7 +106,7 @@ export default {
         },
     },
     components: {
-        buttonMain,
+        modalButtonMain,
     },
 };
 </script>

src/layouts/service-location/helpers/service-location-helper/service-location-helper.js

@@ -28,3 +28,17 @@ 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
+    );
+
+    return Promise.resolve(serviceabilityDetails);
+}

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);
+        }),
     })
 );
 

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",
@@ -157,6 +161,7 @@ export default {
         },
         onModalClosed() {
             this.internalModel = deepClone(this.modelValue);
+            this.resetAlerts();
         },
         resetComponent(updatedServiceZipCodeInfo) {
             // Reset the validation form, setting the initial values
@@ -175,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(
@@ -187,11 +195,14 @@ export default {
             } else {
                 // retrieve mobile fee part
                 const serviceZipCode = this.internalModel.addressQuestions.zipCode;
-
                 const mobileFeePart = await getPricedMobileFeePart(serviceZipCode);
 
-                // emit additional data to parent
+                // 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);
 
                 // Update the page level model

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 {
+.modal-dialog {
-    margin-top: 1.5rem;
+    .question-text {
-    margin-bottom: 1rem;
+        & > span {
-    font-size: 1rem;
+            text-align: left;
-    line-height: 1.625rem;
+        }
-
-    & > span {
-        text-align: left;
     }
 }
 </style>

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);
+        }),
     })
 );
 

src/layouts/service-location/service-location.vue

@@ -9,22 +9,37 @@
                 ref="serviceZipCodeQuestion"
                 :mobileFeePart="mobileFeePart"
                 @updated-mobile-fee-part="setMobileFeePart"
+                @updated-serviceability="setServiceabilityDetails"
+                @updated-contains-military-base="setContainsMilitaryBase"
                 linkWidgetName="ServiceZipLinkWidget"
-                modalWidgetName="ServiceZipModalWidget"
+                modalWidgetName="ServiceZipModalWidget" />
-                @updated-contains-military-base="setContainsMilitaryBase" />
             <alert
                 class="my-4"
                 cmsWidgetName="AlertMilitaryBaseZipWidget"
                 v-if="showMilitaryZipAlert"
                 alertClass="alert-warning" />
+            <serviceTypeQuestion
+                v-model="selectedServiceType"
+                :isGlassServiceableInshop="isGlassServiceableInshop"
+                :isRecalibrationServiceableInshop="isRecalibrationServiceableInshop"
+                :isGlassServiceableMobile="isGlassServiceableMobile"
+                :isRecalibrationServiceableMobile="isRecalibrationServiceableMobile"
+                ref="serviceTypeQuestion"
+                groupName="serviceTypeQuestion"
+                cmsWidgetName="ServiceTypeQuestionWidget"
+                validationRules="option-required" />
             <mobileLocationModalQuestions
+                v-show="selectedServiceType === 'Mobile'"
                 v-model="mobileLocationQuestions"
                 :mobileFeePart="mobileFeePart"
                 @updated-mobile-fee-part="setMobileFeePart"
+                @updated-serviceability="setServiceabilityDetails"
+                @updated-contains-military-base="setContainsMilitaryBase"
                 ref="mobileLocationModalQuestions"
                 linkWidgetName="MobileLocationLinkWidget"
                 modalWidgetName="MobileLocationModalWidget" />
             <textboxQuestion
+                v-show="selectedServiceType === 'Mobile'"
                 ref="mobileLocationQuestionsError"
                 v-model="mobileLocationValidationField"
                 validationRules="mobile-location-required"
@@ -45,6 +60,7 @@
 import alert from "@/ux-components/alert/alert";
 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";
@@ -54,10 +70,14 @@ import textboxQuestion from "@/digital-components/textbox-question/textbox-quest
 
 // Supporting files
 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";
 import { errorMessages } from "@/constants/error-messages";
 import { required } from "@/helpers/validation-rules";
@@ -74,17 +94,24 @@ export default {
             state: this.getServiceStateFromStore(),
             zipCode: this.getServiceZipCodeFromStore(),
             isVehicleProtected: null,
-            isZipServiceableMobile: null,
+            isGlassServiceableInshop: null,
-            isZipServiceableInShop: null,
+            isRecalibrationServiceableInshop: null,
+            isGlassServiceableMobile: null,
+            isRecalibrationServiceableMobile: null,
             mobileFeePart: null,
             zipContainsMilitaryBase: false,
+            selectedServiceType: null,
             mobileLocationValidationField: null,
         };
     },
     async beforeRouteEnter(to, from, next) {
         // Call APIs
         const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
+
         const serviceZipCode = store.getters.order.serviceLocation.zipCode;
+        const getZipCodeData = baseMixin.methods.getZipCodeData(serviceZipCode);
+
+        const serviceabilityDetailsPromise = getServiceabilityDetails(serviceZipCode);
 
         const mobileFeePartPromise = getPricedMobileFeePart(serviceZipCode);
 
@@ -98,9 +125,13 @@ export default {
                 resultKey: "mobileFeePart",
                 promise: mobileFeePartPromise,
             },
+            {
+                resultKey: "serviceabilityDetails",
+                promise: serviceabilityDetailsPromise,
+            },
             {
                 resultKey: "zipCodeData",
-                promise: baseMixin.methods.getZipCodeData(serviceZipCode),
+                promise: getZipCodeData,
             },
         ];
 
@@ -109,9 +140,11 @@ 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(
-            vm.zipContainsMilitaryBase = resultMap.zipCodeData.containsMilitaryBase;
+                resultMap.zipCodeData,
-            vm.zipCode = serviceZipCode;
+                resultMap.serviceabilityDetails,
+                resultMap.mobileFeePart
+            );
         });
     },
     computed: {
@@ -157,10 +190,10 @@ export default {
             },
         },
         showMilitaryZipAlert() {
-            return (
+            const isZipServiceableMobile =
-                this.zipContainsMilitaryBase &&
+                this.isGlassServiceableMobile && this.isRecalibrationServiceableMobile;
-                (this.isZipServiceableMobile == null || this.isZipServiceableMobile === true)
+
-            );
+            return this.zipContainsMilitaryBase && isZipServiceableMobile;
         },
     },
     methods: {
@@ -171,7 +204,15 @@ export default {
                 store.getters.payment.isInsurance !== null
             );
         },
-        setData(mobileFeePart) {
+        setData(zipCodeData, serviceabilityDetails, mobileFeePart) {
+            if (zipCodeData) {
+                this.zipContainsMilitaryBase = zipCodeData.containsMilitaryBase;
+            }
+
+            if (serviceabilityDetails) {
+                this.setServiceabilityDetails(serviceabilityDetails);
+            }
+
             if (mobileFeePart) {
                 this.mobileFeePart = mobileFeePart;
             }
@@ -203,11 +244,13 @@ export default {
 
             this.isVehicleProtected = null;
         },
-        setServiceZipCodeModalMeta(meta) {
+        setServiceabilityDetails(serviceabilityDetails) {
-            this.serviceZipCodeMeta = meta;
+            this.isGlassServiceableInshop = serviceabilityDetails.isGlassServiceableInshop;
-        },
+            this.isRecalibrationServiceableInshop =
-        setMobileLocationModalMeta(meta) {
+                serviceabilityDetails.isRecalibrationServiceableInshop;
-            this.mobileLocationMeta = meta;
+            this.isGlassServiceableMobile = serviceabilityDetails.isGlassServiceableMobile;
+            this.isRecalibrationServiceableMobile =
+                serviceabilityDetails.isRecalibrationServiceableMobile;
         },
         backButtonAction() {
             this.$router.navigateWithoutSaving(this.navigationScenarios.CLICKED_BACK, this.$route);
@@ -219,6 +262,7 @@ export default {
     components: {
         alert,
         serviceZipModalQuestion,
+        serviceTypeQuestion,
         mobileLocationModalQuestions,
         funnelHeader,
         funnelFooter,
@@ -229,3 +273,11 @@ export default {
     },
 };
 </script>
+
+<style lang="scss">
+.question-text {
+    & > span {
+        text-align: center;
+    }
+}
+</style>

src/layouts/service-location/service-type-question/service-type-question.spec.js

@@ -0,0 +1,185 @@
+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 };
+}

src/layouts/service-location/service-type-question/service-type-question.vue

@@ -0,0 +1,113 @@
+<template>
+    <transition name="fade" mode="out-in">
+        <div class="service-type-question" aria-live="polite">
+            <buttonQuestion
+                :questionText="questionText"
+                :answers="answersToDisplay"
+                :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: "service-type-question",
+    props: {
+        modelValue: String,
+        groupName: String,
+        isAvailable: Boolean,
+        suppressError: Boolean,
+        validationRules: String,
+        cmsWidgetName: String,
+        isGlassServiceableMobile: Boolean,
+        isGlassServiceableInshop: Boolean,
+        isRecalibrationServiceableInshop: Boolean,
+        isRecalibrationServiceableMobile: Boolean,
+    },
+    computed: {
+        questionText() {
+            return this.getCmsContent(this.cmsWidgetName, "QuestionText");
+        },
+        answersFromCms() {
+            return this.getCmsContent(this.cmsWidgetName, "Answers");
+        },
+        answersToDisplay() {
+            let filteredAnswers;
+            if (this.serviceability == "All") {
+                filteredAnswers = this.answersFromCms;
+            } else if (this.serviceability == "MobileOnly") {
+                filteredAnswers = this.answersFromCms.filter((answer) => answer.Name == "Mobile");
+            } 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 mobileAvailable;
+            if (this.IsRecalibrationServiceableMobile == null) {
+                mobileAvailable = this.isGlassServiceableMobile;
+            } else {
+                mobileAvailable =
+                    this.isGlassServiceableMobile && this.isRecalibrationServiceableMobile;
+            }
+
+            const inshopAvailable =
+                this.isGlassServiceableInshop && this.isRecalibrationServiceableInshop;
+
+            let result;
+            if (inshopAvailable && mobileAvailable) {
+                result = "All";
+            } else if (inshopAvailable && !mobileAvailable) {
+                result = "InshopOnly";
+            } else if (!inshopAvailable && mobileAvailable) {
+                result = "MobileOnly";
+            } else if (!inshopAvailable && !mobileAvailable) {
+                result = "None";
+            }
+
+            return result;
+        },
+        selectedValues: {
+            get: function () {
+                return this.modelValue;
+            },
+            set: function (newValue) {
+                this.$emit("update:modelValue", newValue);
+            },
+        },
+    },
+    watch: {
+        serviceability: {
+            handler(newValue) {
+                if (newValue == "MobileOnly") {
+                    this.selectedValues = "Mobile";
+                } else {
+                    this.selectedValues = null;
+                }
+            },
+        },
+    },
+    components: {
+        buttonQuestion,
+    },
+};
+</script>
+
+<style lang="scss">
+.list-card img {
+    height: auto;
+    width: 3.417rem;
+}
+</style>

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);
+        }),
     })
 );
 

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" />
@@ -39,7 +40,10 @@ import serviceZipQuestion from "@/layouts/service-location/service-zip-modal-que
 import modal from "@/digital-components/modal/modal";
 import alert from "@/ux-components/alert/alert";
 
-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: "service-zip-modal-question",
@@ -146,12 +150,16 @@ export default {
                     const serviceZipCode = this.internalModel.zipCode;
                     const mobileFeePart = await getPricedMobileFeePart(serviceZipCode);
 
-                    // emit it to parent
+                    // 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);
 
                     // Update the page level model
                     this.$emit("update:modelValue", this.internalModel);
-                    this.$emit("updated-contains-military-base", zipCodeData.containsMilitaryBase);
 
                     this.closeModal();
                 }

src/store/index.js

@@ -43,6 +43,7 @@ const getDefaultState = () => {
                 state: null,
                 zipCode: null,
                 zipCodeCtu: null,
+                serviceType: null,
             },
             customer: {
                 emailAddress: null,
@@ -926,6 +927,16 @@ export const actions = {
         });
     },
 
+    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,
+            endpoint: `${endpoints.GetServiceabilityDetails.url}?zip=${serviceZipCode}&lineItems=${encodedLineItems}`,
+        });
+    },
+
     getSupportingItems(context) {
         const glassPartsArray = context.getters.lineItems.glassParts ?? [];
         const carId = context.getters.vehicle.carId;
@@ -1653,3 +1664,12 @@ function getLineItemQueryStringForPricing(lineItems) {
         })
         .join("");
 }
+
+function getLineItemQueryStringForServiceability(lineItems) {
+    return lineItems
+        .map((lineItem) => {
+            let queryStringSnippet = `&lineItems=${lineItem.partNumber}`;
+            return queryStringSnippet;
+        })
+        .join("");
+}

src/ux-components/modal-button-main/modal-button-main.spec.js

@@ -0,0 +1,187 @@
+import { shallowMount } from "@vue/test-utils";
+import modalButtonMain from "./modal-button-main";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import { nextTick } from "vue";
+
+describe("modal-button-main.vue", () => {
+    it("Should return btn-primary class", () => {
+        // Arrange/Act
+        const wrapper = shallowMount(
+            modalButtonMain,
+            setupMocks({
+                propsData: {
+                    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(
+            modalButtonMain,
+            setupMocks({
+                propsData: {
+                    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(
+            modalButtonMain,
+            setupMocks({
+                propsData: {
+                    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(
+            modalButtonMain,
+            setupMocks({
+                propsData: {
+                    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(
+            modalButtonMain,
+            setupMocks({
+                propsData: {
+                    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(
+            modalButtonMain,
+            setupMocks({
+                propsData: {
+                    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(
+            modalButtonMain,
+            setupMocks({
+                propsData: {
+                    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(
+            modalButtonMain,
+            setupMocks({
+                propsData: {
+                    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;
+}

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>