Merge branch 'develop' into feature/CSR-886

jest.config.js

@@ -28,4 +28,6 @@ module.exports = {
       // Got the go ahead from Mark to temporarily lower this. Taking out initialize component made the year,make,model and style coverage drop a bit. Once unit tests for license plate lookup, vin lookup and address lookup are in the coverage should go back up to 90
     },
   },
+  // Uncomment this to avoid the massive amount of warnings we are getting for onSubmit and onInvalidSubmit
+  // silent: true,
 };

src/constants/analytics.js

@@ -19,6 +19,7 @@ const GaActions = {
     CLICKED: "Clicked",
     VIF: "vif",
     SUBMITTED: "Submitted",
+    DISPLAYED: "Displayed",
 };
 
 const GaLabels = {

src/constants/endpoints.js

@@ -90,6 +90,14 @@ const endpoints = {
         url: "/parts/api/v1/parts/supporting-items",
         method: "POST",
     },
+    GetAlertReasons: {
+        url: "/location/api/v1/location/alert-reasons",
+        method: "GET",
+    },
+    GetProviders: {
+        url: "/location/api/v1/location/providers",
+        method: "GET",
+    },
     GetCapabilityQuestions: {
         url: "/parts/api/v1/parts/capability-questions",
         method: "GET",

src/constants/store-actions.js

@@ -21,6 +21,7 @@ const storeActions = {
     LOOKUP_VIN_BY_PLATE: "lookupVinByPlate",
     LOOKUP_VIN_BY_ADDRESS: "lookupVinByAddress",
     LOOKUP_VIN_BY_IMAGE: "lookupVinByImage",
+    GET_ALERT_REASONS_BY_CTU: "getAlertReasonsByCtu",
     GET_PARTS_OR_QUESTIONS: "getPartsOrQuestions",
     GET_PARTS: "getParts",
     GET_WIPERS: "getWipers",
@@ -32,6 +33,7 @@ const storeActions = {
     GET_MOBILE_FEE_PART: "getMobileFeePart",
     GET_SERVICEABILITY_DETAILS: "getServiceabilityDetails",
     GET_SHOP_TIME_SLOTS: "getShopTimeSlots",
+    GET_PROVIDERS: "getProviders",
     SAVE_SESSION: "saveSession",
     LOAD_SESSION: "loadSession",
     UPDATE_STORE_WITH_SAVE_SESSION_RESPONSE: "updateStoreWithSaveSessionResponse",
@@ -60,6 +62,7 @@ const storeActions = {
     SAVE_VEHICLE_DAMAGE: "saveVehicleDamage",
     SAVE_VIN_LOOKUP: "saveVinLookup",
     SAVE_SERVICE_LOCATION: "saveServiceLocation",
+    SAVE_SCHEDULE: "saveSchedule",
     SAVE_EMAIL: "saveEmail",
     SAVE_REGISTRATION_LICENSE_PLATE_LOOKUP: "saveRegistrationLicensePlateLookup",
     SAVE_VIN: "saveVin",

src/constants/store-mutations.js

@@ -33,6 +33,7 @@ const storeMutations = {
     UPDATE_REGISTRATION: "updateRegistration",
 
     UPDATE_SERVICE_LOCATION: "updateServiceLocation",
+    UPDATE_SCHEDULE: "updateSchedule",
 
     UPDATE_CUSTOMER_EMAIL_ADDRESS: "updateCustomerEmailAddress",
 

src/digital-components/button-question/button-question.vue

@@ -87,6 +87,7 @@ import listButtonHorizontal from "@/ux-components/list-button-horizontal/list-bu
 import listCard from "@/ux-components/list-card/list-card";
 import radio from "@/ux-components/radio/radio";
 import { useField, ErrorMessage } from "vee-validate";
+import { queryStrings } from "@/constants/query-strings";
 
 export default {
     name: "buttonQuestion",
@@ -120,7 +121,7 @@ export default {
         isOverflowScrollable: Boolean,
         isWide: Boolean,
         isCashOrInsurance: Boolean,
-        modelValue: [Array, Number, String],
+        modelValue: [Array, Number, String, Object],
         value: [Number, String],
         validationRules: String,
         suppressError: Boolean,
@@ -129,6 +130,10 @@ export default {
         additionalButtonStyling: String,
         isSmallQuestionText: Boolean,
         customButtonQuestionId: String,
+        logDisplayedValuesEvent: {
+            type: Boolean,
+            default: false,
+        },
     },
     setup(props) {
         const propsClone = Object.assign({}, props);
@@ -250,8 +255,33 @@ export default {
         },
     },
     watch: {
-        modelValue() {
+        modelValue(newValue) {
-            this.resetField();
+            this.resetField({
+                value: newValue,
+            });
+        },
+        answers() {
+            //once we get the answers to display from parent, see if we need a GA event to log what we showed
+            if (this.logDisplayedValuesEvent && this.answers.length > 0) {
+                var eventLabel = "";
+                //build comma separated list of all items in button list that we are going to display on page
+                this.answers.forEach((item) => {
+                    if (item.Name) {
+                        eventLabel += item.Name + ",";
+                    }
+                    if (item.buttonLabel) {
+                        eventLabel += item.buttonLabel + ",";
+                    }
+                });
+
+                eventLabel = eventLabel.slice(0, -1); //remove the last comma
+                this.pushEventToGA(
+                    this.$route.query[queryStrings.FMG_PAGE],
+                    this.GaActions.DISPLAYED,
+                    eventLabel,
+                    true
+                );
+            }
         },
     },
     components: {

src/digital-components/modal/modal.vue

@@ -170,6 +170,9 @@ export default {
             }
         }
     }
+    &.show .modal-dialog {
+        transform: translateY(0);
+    }
 }
 body {
     .modal-backdrop {

src/digital-components/text-block/text-block.vue

@@ -1,7 +1,7 @@
 <template>
     <div
-        class="text-block w-100 mt-2"
+        class="text-block w-100"
-        :class="[justifyText, typeStyle, fontWeight]"
+        :class="[justifyText, typeStyle, fontWeight, margin]"
         v-html="this.TextBlockCopy"></div>
 </template>
 
@@ -11,6 +11,11 @@ export default {
     props: {
         customText: String, // used to allow the insert of token values into textblock
         justifyText: String, // left, right, center
+        margin: {
+            // bootstrap margin to apply to the block.
+            type: String,
+            default: "mt-2",
+        },
         typeStyle: String, // h1-h6, body, small, label, caption (see Figma or Confluence documentation)
         fontWeight: String, // bold=500, default is 400
         cmsWidgetName: String,

src/fmg-components/funnel-header/menu-modal/menu-modal.vue

@@ -66,6 +66,7 @@
 <script>
 import textLink from "@/ux-components/text-link/text-link";
 import { Modal } from "bootstrap";
+import baseMixin from "@/mixins/base-mixin.js";
 
 export default {
     name: "menuModal",
@@ -92,10 +93,7 @@ export default {
         show() {
             this.currentFooterAndHeaderHeight = this.getFooterInfoBoxHeight() + 72;
             this.isActive = true;
-            document.querySelector(".page-container-grouped-styles").scrollTo({
+            this.scrollToPageTop();
-                top: 0,
-                behavior: "smooth",
-            });
         },
         hide() {
             var self = this;

src/helpers/damage-helper.js

@@ -1,6 +1,7 @@
 import store from "@/store";
 import baseMixin from "@/mixins/base-mixin.js";
 import { storeActions } from "@/constants/store-actions";
+import { damageLocationsSelected as glassLocations } from "@/constants/damage-locations-selected";
 
 export function getDamageString() {
     // If it's a repair it's always a windshield.
@@ -45,6 +46,14 @@ export function getIsWindshieldOnly() {
     return returnString;
 }
 
+export function includesWindshieldReplacement() {
+    const windshieldMatches =
+        store.getters.order.damage.glassToReplace?.filter(
+            (glassToReplace) => glassToReplace.glassLocation === glassLocations.WINDSHIELD
+        ) ?? [];
+    return windshieldMatches.length > 0;
+}
+
 export async function isGlassAvailableForCarId(carId) {
     const newGlassOptions = await baseMixin.methods.dispatchStoreAction(
         storeActions.GET_DAMAGE_OPTIONS,

src/helpers/heritage-integration/navigation-helper.js

@@ -7,6 +7,7 @@ import { storeActions } from "@/constants/store-actions.js";
 import { settleAllPromises } from "@/helpers/layout-helper";
 import experimentMixin from "@/mixins/experiment-mixin";
 import { experimentSettings } from "@/constants/experiments";
+import { includesWindshieldReplacement } from "@/helpers/damage-helper";
 import store from "@/store";
 import router from "@/router";
 
@@ -73,6 +74,7 @@ export async function skipVinLookup() {
     return (
         store.getters.damage.isRepair ||
         isVinOptionalVehicle ||
+        !includesWindshieldReplacement() ||
         experimentMixin.methods.hasSettingEqualTo(experimentSettings.SUPPRESS_VIN_CAPTURE, "true")
     );
 }
@@ -85,6 +87,7 @@ export async function skipVinLookupNotRepair() {
     return (
         !store.getters.damage.isRepair &&
         (isVinOptionalVehicle ||
+            !includesWindshieldReplacement() ||
             experimentMixin.methods.hasSettingEqualTo(
                 experimentSettings.SUPPRESS_VIN_CAPTURE,
                 "true"

src/helpers/heritage-integration/navigation-helper.spec.js

@@ -135,7 +135,7 @@ describe("getPageToRouteExistingOrderTo", () => {
         expect(result).toBe(fmgPageValues.VEHICLE_DAMAGE);
     });
 
-    test("user has YMMS and no vehicle questions > should return vin-lookup", async () => {
+    test("user has YMMS and no vehicle questions > should return estimate", async () => {
         // Arrange
         const toRoute = {
             query: {},
@@ -172,7 +172,7 @@ describe("getPageToRouteExistingOrderTo", () => {
         const result = await getPageToRouteExistingOrderTo(toRoute, false);
 
         //Assert
-        expect(result).toBe(fmgPageValues.VIN_LOOKUP);
+        expect(result).toBe(fmgPageValues.ESTIMATE);
     });
 
     test("user has YMMS but no questions or carId > should return estimate", async () => {

src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue

@@ -45,7 +45,7 @@
             <div class="row mb-4" v-show="showAddressFields" aria-live="polite">
                 <div class="col">
                     <dropdownQuestion
-                        customInputId="state"
+                        customDropdownId="state"
                         cmsWidgetName="StateQuestionWidget"
                         v-model="addressModel.state"
                         ref="state"
@@ -115,6 +115,10 @@ export default {
             type: Boolean,
             default: false,
         },
+        preserveCityAndStateOnReset: {
+            type: Boolean,
+            default: false,
+        },
     },
     data() {
         return {
@@ -390,8 +394,10 @@ export default {
                     this.displayNoMatchWarning = true;
 
                     this.addressModel.city = "";
-                    this.addressModel.state = "";
+                    if (!this.preserveCityAndStateOnReset) {
-                    this.addressModel.zipCode = "";
+                        this.addressModel.state = "";
+                        this.addressModel.zipCode = "";
+                    }
                     this.showAddressFields = true;
                     this.displayVerificationWarning = false;
 

src/layouts/estimate/estimate.spec.js

@@ -101,6 +101,9 @@ describe("estimate.vue", () => {
         //Arrange
         const { wrapper } = setupMocks({});
 
+        delete window.location;
+        window.location = { search: "?fmgPage=estimate&zipcode=43015" };
+
         //Act
         estimate.beforeRouteEnter.call(
             wrapper.vm,

src/layouts/estimate/estimate.vue

@@ -18,7 +18,8 @@
                         buttonTypeString="listButton"
                         v-model="selectedVinLookupMethod"
                         isRequired
-                        validationRules="option-required" />
+                        validationRules="option-required"
+                        :logDisplayedValuesEvent="true" />
                 </div>
                 <div v-else>
                     <alert
@@ -147,11 +148,17 @@ export default {
 
         const queryString = window.location.search;
         const urlParams = new URLSearchParams(queryString);
-        const hasZip = urlParams.has(queryStrings.ZIP_CODE);
+        const lowerCaseParams = new URLSearchParams();
-        const zip = urlParams.get(queryStrings.ZIP_CODE);
+        for (const [name, value] of urlParams) {
+            lowerCaseParams.append(name.toLowerCase(), value);
+        }
+
+        const zip = lowerCaseParams.get(queryStrings.ZIP_CODE)
+            ? lowerCaseParams.get(queryStrings.ZIP_CODE)
+            : store.getters.order.serviceLocation.zipCode;
 
         var vinByAddressPromise;
-        if (hasZip) {
+        if (zip) {
             vinByAddressPromise = baseMixin.methods.dispatchStoreAction(
                 storeActions.IS_VIN_BY_ADDRESS_PERMISSIBLE,
                 zip,
@@ -191,7 +198,7 @@ export default {
                 }
             }
 
-            if (zip && resultMap.vinByAddress === false) {
+            if (!zip || resultMap.vinByAddress === false) {
                 var indexToRemove = resultMap.cmsContent.VinLookupMethod.Answers.findIndex(
                     (answer) => answer.Name === "HomeAddress"
                 );
@@ -199,6 +206,7 @@ export default {
                     resultMap.cmsContent.VinLookupMethod.Answers.splice(indexToRemove, 1);
                 }
             }
+
             vm.setCmsContent(resultMap.cmsContent);
         });
     },

src/layouts/license-plate-lookup/license-plate-lookup.spec.js

@@ -525,7 +525,6 @@ describe("license-plate-lookup.vue", () => {
             });
             const registrationZip = "12345";
             const serviceZip = "12345";
-            console.log("this is the test I care about");
 
             wrapper.vm.navigateForward = jest.fn();
             const vinLookup = { data: { vehicle: { carId: "TESTID1" } } };

src/layouts/license-plate-lookup/license-plate-lookup.vue

@@ -7,7 +7,7 @@
                 :displayGenericVehicleImage="false" />
             <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
             <div class="fade-on-route-transition sub-container make-tall">
-                <div class="row my-2">
+                <div class="row mt-2 mb-4">
                     <div class="col">
                         <textboxQuestion
                             cmsWidgetName="LicensePlateNumberQuestionWidget"
@@ -17,7 +17,7 @@
                             validationRules="license-plate-required" />
                     </div>
                 </div>
-                <div class="row my-2">
+                <div class="row mt-0 mb-4">
                     <div class="col">
                         <textboxQuestion
                             cmsWidgetName="RegistrationZipQuestionWidget"
@@ -27,7 +27,7 @@
                             validationRules="zip-required|zip-format" />
                     </div>
                 </div>
-                <div class="row mt-2">
+                <div class="row mt-0">
                     <div class="col">
                         <textboxQuestion
                             cmsWidgetName="EmailAddressQuestionWidget"

src/layouts/quote/service-package-question/service-package-question.vue

@@ -7,7 +7,8 @@
         :buttonTypeObject="servicePackageRadio"
         v-model="selectedPackageName"
         :validationRules="validationRules"
-        :isRequired="isRequired" />
+        :isRequired="isRequired"
+        :logDisplayedValuesEvent="true" />
 </template>
 
 <script>

src/layouts/review/review.spec.js

@@ -0,0 +1,3 @@
+describe("Review Page", () => {
+    test.todo("Add more tests as specific functionality is added.");
+});

src/layouts/review/review.vue

@@ -0,0 +1,102 @@
+<template>
+    <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm">
+        <!-- When customer-details is added: v-slot="{ meta }" -->
+        <div class="page-container-grouped-styles">
+            <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
+            <vehicleBanner
+                cmsWidgetName="VehicleBannerWidget"
+                :displayGenericVehicleImage="false" />
+
+            <textBlock
+                :customText="subHeaderTitle"
+                typeStyle="h5"
+                justifyText="text-center"
+                margin="mt-1"
+                class="dark-header" />
+            <textBlock
+                :customText="subHeaderBody"
+                typeStyle="body"
+                justifyText="left"
+                margin="mt-0 mb-2" />
+
+            <buttonMain
+                ref="buttonMain"
+                isPrimary
+                :buttonText="forwardButtonText"
+                loaderColor="white"
+                @click-event="forwardButtonAction" />
+
+            <funnelFooter
+                cmsWidgetName="FunnelFooterWidget"
+                @back-clicked="backButtonAction"
+                @ForwardClicked="forwardButtonAction" />
+        </div>
+    </Form>
+</template>
+
+<script>
+import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
+import funnelFooter from "@/fmg-components/funnel-footer/funnel-footer";
+import vehicleBanner from "@/fmg-components/vehicle-banner/vehicle-banner";
+import buttonMain from "@/ux-components/button-main/button-main";
+import textBlock from "@/digital-components/text-block/text-block";
+
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { settleAllPromises } from "@/helpers/layout-helper";
+
+export default {
+    name: "review",
+    async beforeRouteEnter(to, from, next) {
+        // Call APIs
+        const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
+
+        // Settle promises and get results
+        const promiseResultMap = [
+            {
+                resultKey: "cmsContent",
+                promise: cmsContentPromise,
+            },
+        ];
+
+        const resultMap = await settleAllPromises(promiseResultMap);
+
+        next((vm) => {
+            vm.setCmsContent(resultMap.cmsContent);
+        });
+    },
+    data() {
+        return {};
+    },
+    methods: {
+        arePagePrerequisitesValid() {
+            return true;
+        },
+        backButtonAction() {},
+        forwardButtonAction() {},
+    },
+    computed: {
+        subHeaderTitle() {
+            return this.getCmsContent("FunnelSubHeaderWidget", "HeaderText");
+        },
+        subHeaderBody() {
+            return this.getCmsContent("FunnelSubHeaderWidget", "BodyText");
+        },
+        forwardButtonText() {
+            return this.getCmsContent("FunnelFooterWidget", "ForwardButtonText");
+        },
+    },
+    components: {
+        funnelHeader,
+        funnelFooter,
+        vehicleBanner,
+        buttonMain,
+        textBlock,
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+.dark-header {
+    color: $black;
+}
+</style>

src/layouts/schedule/helpers/schedule-helper.js

@@ -0,0 +1,13 @@
+import { storeActions } from "@/constants/store-actions";
+import baseMixin from "@/mixins/base-mixin.js";
+
+export async function getAlertReasons(ctu) {
+    const alertReasons = await baseMixin.methods.dispatchStoreAction(
+        storeActions.GET_ALERT_REASONS_BY_CTU,
+        {
+            ctu: ctu,
+        }
+    );
+
+    return Promise.resolve(alertReasons);
+}

src/layouts/schedule/schedule.vue

@@ -18,6 +18,17 @@
                     <span v-else class="m-0 text-body" v-html="copy"></span>
                 </span>
             </div>
+            <template v-if="displayWeatherAlert">
+                <alert
+                    v-for="alert in weatherAlerts"
+                    v-show="cmsHeadlineTextFound(alert.cmsWidgetName)"
+                    :key="alert.cmsWidgetName"
+                    :ref="alert.cmsWidgetName"
+                    class="mt-2 mb-3"
+                    :cmsWidgetName="alert.cmsWidgetName"
+                    alertClass="alert-warning" />
+            </template>
+
             <date-picker
                 selectableDatesSetting="custom"
                 v-model="selectedDate"
@@ -35,6 +46,7 @@
 
 <script>
 // Components
+import alert from "@/ux-components/alert/alert";
 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";
@@ -48,6 +60,7 @@ import baseMixin from "@/mixins/base-mixin.js";
 import { storeActions } from "@/constants/store-actions";
 import { settleAllPromises } from "@/helpers/layout-helper";
 import { navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
+import { getAlertReasons } from "@/layouts/schedule/helpers/schedule-helper";
 import {
     doesCopyContainRouterLink,
     splitCopyOnCMSPlaceHolder,
@@ -56,6 +69,7 @@ import {
 } from "@/helpers/cms-content-helper";
 import { errorMessages } from "@/constants/error-messages";
 import { required } from "@/helpers/validation-rules";
+import store from "@/store";
 
 defineRule("date-required", required(errorMessages.DATE_REQUIRED));
 
@@ -65,18 +79,25 @@ export default {
         return {
             selectedDate: null,
             selectableDatesData: [],
+            weatherAlerts: [],
         };
     },
     async beforeRouteEnter(to, from, next) {
         // Call APIs
         const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
 
+        const alertReasonsPromise = getAlertReasons(store.getters.order.serviceLocation.zipCodeCtu);
+
         // Settle promises and get results
         const promiseResultMap = [
             {
                 resultKey: "cmsContent",
                 promise: cmsContentPromise,
             },
+            {
+                resultKey: "alertReasons",
+                promise: alertReasonsPromise,
+            },
         ];
 
         const resultMap = await settleAllPromises(promiseResultMap);
@@ -84,6 +105,7 @@ export default {
         // Call the "next" function to complete the transition to this page.
         next((vm) => {
             vm.setCmsContent(resultMap.cmsContent);
+            vm.setData(resultMap.alertReasons);
         });
     },
     computed: {
@@ -94,6 +116,9 @@ export default {
             // Splits content when brackets are found in text so that text can be looped through and router-link can be injected when needed
             return this.splitCopyOnCMSPlaceHolder(this.ChangeShopLinkText);
         },
+        displayWeatherAlert() {
+            return this.weatherAlerts.length > 0;
+        },
     },
     methods: {
         doesCopyContainRouterLink,
@@ -139,10 +164,56 @@ export default {
             });
             return responseData;
         },
+        setData(alertReasonsData) {
+            if (alertReasonsData) {
+                this.convertReasonsToCmsAlerts(alertReasonsData);
+            }
+        },
+        cmsHeadlineTextFound(widgetName) {
+            return this.getCmsContent(widgetName, "HeadlineText") !== "";
+        },
+        convertReasonsToCmsAlerts(data) {
+            this.weatherAlerts = data.reduce((newObj, alert) => {
+                newObj.push({
+                    cmsWidgetName: `LocationAlert-${alert}`,
+                    alertReason: alert,
+                });
+                return newObj;
+            }, []);
+        },
+        async getWeatherAlertReasons(ctu) {
+            await getAlertReasons(ctu)
+                .then((response) => {
+                    if (response.data) {
+                        this.convertReasonsToCmsAlerts(response.data);
+                    }
+                })
+                .catch(() => {
+                    console.log("error fetching alert reasons..");
+                });
+        },
+        getAvailableDates(startDate, endDate) {
+            return this.mockSelectableDatesData;
+        },
+        getServiceZipCtuCodeFromStore() {
+            return store.getters.order.serviceLocation.zipCodeCtu;
+        },
         backButtonAction() {
             this.$router.navigateWithoutSaving(this.navigationScenarios.CLICKED_BACK, this.$route);
         },
-        forwardButtonAction() {
+        async forwardButtonAction() {
+            //TODO: replace properties with real values once they are available
+            await this.dispatchStoreAction(
+                this.storeActions.SAVE_SCHEDULE,
+                {
+                    date: "2023-07-04T00:00:00",
+                    startTime: "2023-07-04T12:00:00",
+                    endTime: "2023-07-04T17:00:00",
+                    routeCode: "03341-01820-S-B*20232*11 AM",
+                },
+                false
+            );
+
             navigateToHeritageFunnel({ loadingModal: this.$refs.loadingModal });
         },
     },
@@ -154,6 +225,7 @@ export default {
         },
     },
     components: {
+        alert,
         funnelHeader,
         funnelFooter,
         funnelSubHeader,
@@ -161,6 +233,7 @@ export default {
         loadingModal,
         datePicker,
     },
+    mounted() {},
 };
 </script>
 

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

@@ -2,6 +2,7 @@
     <transition name="fade" mode="out-in">
         <div class="appointment-type-question" aria-live="polite">
             <buttonQuestion
+                ref="buttonQuestion"
                 customButtonQuestionId="appointmentTypeQuestion"
                 :questionText="questionText"
                 :answers="answersToDisplay"
@@ -66,12 +67,22 @@ export default {
         },
     },
     watch: {
+        answersToDisplay: {
+            handler(newValue) {
+                // If there is only one option to display and that option is 'Mobile' then select it
+                if (
+                    newValue.length == 1 &&
+                    newValue.findIndex((answer) => answer.Name == "Mobile") != -1
+                ) {
+                    this.selectedValues = "Mobile";
+                }
+            },
+            immediate: true,
+        },
         isMobileOnly: {
             handler(newValue) {
                 if (newValue) {
                     this.selectedValues = "Mobile";
-                } else {
-                    this.selectedValues = null;
                 }
             },
         },

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

@@ -48,7 +48,7 @@ describe("service-location-helper.js", () => {
     it("Should return null if no service zip code is passed in", async () => {
         // Arrange
         const serviceZipCode = null;
-        const serviceType = "Replace";
+        const damageType = "Replace";
         const parentAccountNumber = 167132;
         const billToAccountNumber = 1234;
         const expected = null;
@@ -56,7 +56,7 @@ describe("service-location-helper.js", () => {
         // Act
         const result = await getPricedMobileFeePart(
             serviceZipCode,
-            serviceType,
+            damageType,
             parentAccountNumber,
             billToAccountNumber
         );
@@ -68,7 +68,7 @@ describe("service-location-helper.js", () => {
     it("Should return the priced mobile fee part", async () => {
         // Arrange
         const serviceZipCode = "43235";
-        const serviceType = "Replace";
+        const damageType = "Replace";
         const parentAccountNumber = 167132;
         const billToAccountNumber = 1234;
 
@@ -84,7 +84,7 @@ describe("service-location-helper.js", () => {
         // Act
         const result = await getPricedMobileFeePart(
             serviceZipCode,
-            serviceType,
+            damageType,
             parentAccountNumber,
             billToAccountNumber
         );

src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue

@@ -17,15 +17,15 @@
                         @click-event="openModal"
                         aria-label="Modal window" />
                 </div>
-                <textBlock
-                    :customText="mobileFeeText"
-                    cmsWidgetName="MobileFeeDisclaimerWidget"
-                    typeStyle="caption" />
                 <div v-show="errorMessage" class="row my-1 form-test-error">
                     <span class="d-inline-flex small mt-0 center-error-message" role="alert">
                         {{ errorMessage }}
                     </span>
                 </div>
+                <textBlock
+                    :customText="mobileFeeText"
+                    cmsWidgetName="MobileFeeDisclaimerWidget"
+                    typeStyle="caption" />
             </div>
             <modal
                 :ref="modalName"
@@ -37,7 +37,8 @@
                 <addressQuestions
                     ref="addressQuestions"
                     v-model="internalModel.addressQuestions"
-                    captureApartmentNumberOrBusinessName="true" />
+                    captureApartmentNumberOrBusinessName="true"
+                    preserveCityAndStateOnReset="true" />
                 <vehicleProtectedQuestion
                     ref="vehicleProtectedQuestion"
                     v-model="internalModel.isVehicleProtected"
@@ -136,6 +137,9 @@ export default {
         alertInvalidZipWidgetName: String,
         customComponentId: String,
         validationRules: String,
+        onZipUpdateCallback: {
+            type: Function,
+        },
     },
     computed: {
         mobileLocationLinkPromptText() {
@@ -256,6 +260,10 @@ export default {
                 // Update the page level model
                 this.$emit("update:modelValue", this.internalModel);
 
+                if (this.onZipUpdateCallback) {
+                    await this.onZipUpdateCallback(serviceZipCode);
+                }
+
                 this.closeModal();
             }
         },

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

@@ -186,10 +186,12 @@ beforeEach(() => {
 
 describe("service-location.vue", () => {
     describe("beforeRouteEnter", () => {
-        test("on load sets the mobile fee part when an service zip code has already been provided", async () => {
+        test("on load sets the mobile fee part when a service zip code has already been provided", async () => {
             // Arrange
             const { wrapper } = setupMocks({});
 
+            wrapper.vm.$refs.shopQuestion.initializeComponent = jest.fn();
+
             const mobileFeePart = {
                 partNumber: "MOBILE FEE",
                 description: "MOBILE FEE",
@@ -585,6 +587,8 @@ describe("service-location.vue", () => {
 
                 const { wrapper } = setupMocks({});
 
+                wrapper.vm.$refs.shopQuestion.initializeComponent = jest.fn();
+
                 // Act
                 await serviceLocation.beforeRouteEnter.call(
                     wrapper.vm,
@@ -611,6 +615,8 @@ describe("service-location.vue", () => {
 
                 const { wrapper } = setupMocks({});
 
+                wrapper.vm.$refs.shopQuestion.initializeComponent = jest.fn();
+
                 // Act
                 await serviceLocation.beforeRouteEnter.call(
                     wrapper.vm,
@@ -637,6 +643,8 @@ describe("service-location.vue", () => {
 
                 const { wrapper } = setupMocks({});
 
+                wrapper.vm.$refs.shopQuestion.initializeComponent = jest.fn();
+
                 // Act
                 await serviceLocation.beforeRouteEnter.call(
                     wrapper.vm,
@@ -663,6 +671,8 @@ describe("service-location.vue", () => {
 
                 const { wrapper } = setupMocks({});
 
+                wrapper.vm.$refs.shopQuestion.initializeComponent = jest.fn();
+
                 // Act
                 await serviceLocation.beforeRouteEnter.call(
                     wrapper.vm,
@@ -689,6 +699,8 @@ describe("service-location.vue", () => {
 
                 const { wrapper } = setupMocks({});
 
+                wrapper.vm.$refs.shopQuestion.initializeComponent = jest.fn();
+
                 // Act
                 await serviceLocation.beforeRouteEnter.call(
                     wrapper.vm,
@@ -716,6 +728,8 @@ describe("service-location.vue", () => {
 
                 const { wrapper } = setupMocks({});
 
+                wrapper.vm.$refs.shopQuestion.initializeComponent = jest.fn();
+
                 // Act
                 await serviceLocation.beforeRouteEnter.call(
                     wrapper.vm,
@@ -743,6 +757,8 @@ describe("service-location.vue", () => {
 
                 const { wrapper } = setupMocks({});
 
+                wrapper.vm.$refs.shopQuestion.initializeComponent = jest.fn();
+
                 // Act
                 await serviceLocation.beforeRouteEnter.call(
                     wrapper.vm,
@@ -770,6 +786,8 @@ describe("service-location.vue", () => {
 
                 const { wrapper } = setupMocks({});
 
+                wrapper.vm.$refs.shopQuestion.initializeComponent = jest.fn();
+
                 // Act
                 await serviceLocation.beforeRouteEnter.call(
                     wrapper.vm,
@@ -797,6 +815,8 @@ describe("service-location.vue", () => {
 
                 const { wrapper } = setupMocks({});
 
+                wrapper.vm.$refs.shopQuestion.initializeComponent = jest.fn();
+
                 // Act
                 await serviceLocation.beforeRouteEnter.call(
                     wrapper.vm,
@@ -824,6 +844,8 @@ describe("service-location.vue", () => {
 
                 const { wrapper } = setupMocks({});
 
+                wrapper.vm.$refs.shopQuestion.initializeComponent = jest.fn();
+
                 // Act
                 await serviceLocation.beforeRouteEnter.call(
                     wrapper.vm,
@@ -851,6 +873,8 @@ describe("service-location.vue", () => {
 
                 const { wrapper } = setupMocks({});
 
+                wrapper.vm.$refs.shopQuestion.initializeComponent = jest.fn();
+
                 // Act
                 await serviceLocation.beforeRouteEnter.call(
                     wrapper.vm,
@@ -878,6 +902,8 @@ describe("service-location.vue", () => {
 
                 const { wrapper } = setupMocks({});
 
+                wrapper.vm.$refs.shopQuestion.initializeComponent = jest.fn();
+
                 // Act
                 await serviceLocation.beforeRouteEnter.call(
                     wrapper.vm,
@@ -905,6 +931,8 @@ describe("service-location.vue", () => {
 
                 const { wrapper } = setupMocks({});
 
+                wrapper.vm.$refs.shopQuestion.initializeComponent = jest.fn();
+
                 // Act
                 await serviceLocation.beforeRouteEnter.call(
                     wrapper.vm,
@@ -932,6 +960,8 @@ describe("service-location.vue", () => {
 
                 const { wrapper } = setupMocks({});
 
+                wrapper.vm.$refs.shopQuestion.initializeComponent = jest.fn();
+
                 // Act
                 await serviceLocation.beforeRouteEnter.call(
                     wrapper.vm,
@@ -959,6 +989,8 @@ describe("service-location.vue", () => {
 
                 const { wrapper } = setupMocks({});
 
+                wrapper.vm.$refs.shopQuestion.initializeComponent = jest.fn();
+
                 // Act
                 await serviceLocation.beforeRouteEnter.call(
                     wrapper.vm,
@@ -989,6 +1021,8 @@ describe("service-location.vue", () => {
 
                 const { wrapper } = setupMocks({});
 
+                wrapper.vm.$refs.shopQuestion.initializeComponent = jest.fn();
+
                 // Act
                 await serviceLocation.beforeRouteEnter.call(
                     wrapper.vm,
@@ -1015,6 +1049,8 @@ describe("service-location.vue", () => {
 
                 const { wrapper } = setupMocks({});
 
+                wrapper.vm.$refs.shopQuestion.initializeComponent = jest.fn();
+
                 // Act
                 await serviceLocation.beforeRouteEnter.call(
                     wrapper.vm,
@@ -1041,6 +1077,8 @@ describe("service-location.vue", () => {
 
                 const { wrapper } = setupMocks({});
 
+                wrapper.vm.$refs.shopQuestion.initializeComponent = jest.fn();
+
                 // Act
                 await serviceLocation.beforeRouteEnter.call(
                     wrapper.vm,
@@ -1068,6 +1106,8 @@ describe("service-location.vue", () => {
 
                 const { wrapper } = setupMocks({});
 
+                wrapper.vm.$refs.shopQuestion.initializeComponent = jest.fn();
+
                 // Act
                 await serviceLocation.beforeRouteEnter.call(
                     wrapper.vm,
@@ -1095,6 +1135,8 @@ describe("service-location.vue", () => {
 
                 const { wrapper } = setupMocks({});
 
+                wrapper.vm.$refs.shopQuestion.initializeComponent = jest.fn();
+
                 // Act
                 await serviceLocation.beforeRouteEnter.call(
                     wrapper.vm,
@@ -1122,6 +1164,8 @@ describe("service-location.vue", () => {
 
                 const { wrapper } = setupMocks({});
 
+                wrapper.vm.$refs.shopQuestion.initializeComponent = jest.fn();
+
                 // Act
                 await serviceLocation.beforeRouteEnter.call(
                     wrapper.vm,
@@ -1151,6 +1195,8 @@ describe("service-location.vue", () => {
 
                 const { wrapper } = setupMocks({});
 
+                wrapper.vm.$refs.shopQuestion.initializeComponent = jest.fn();
+
                 // Act
                 await serviceLocation.beforeRouteEnter.call(
                     wrapper.vm,
@@ -1178,6 +1224,8 @@ describe("service-location.vue", () => {
 
                 const { wrapper } = setupMocks({});
 
+                wrapper.vm.$refs.shopQuestion.initializeComponent = jest.fn();
+
                 // Act
                 await serviceLocation.beforeRouteEnter.call(
                     wrapper.vm,
@@ -1205,6 +1253,8 @@ describe("service-location.vue", () => {
 
                 const { wrapper } = setupMocks({});
 
+                wrapper.vm.$refs.shopQuestion.initializeComponent = jest.fn();
+
                 // Act
                 await serviceLocation.beforeRouteEnter.call(
                     wrapper.vm,
@@ -1232,6 +1282,8 @@ describe("service-location.vue", () => {
 
                 const { wrapper } = setupMocks({});
 
+                wrapper.vm.$refs.shopQuestion.initializeComponent = jest.fn();
+
                 // Act
                 await serviceLocation.beforeRouteEnter.call(
                     wrapper.vm,
@@ -1259,6 +1311,8 @@ describe("service-location.vue", () => {
 
                 const { wrapper } = setupMocks({});
 
+                wrapper.vm.$refs.shopQuestion.initializeComponent = jest.fn();
+
                 // Act
                 await serviceLocation.beforeRouteEnter.call(
                     wrapper.vm,
@@ -1286,6 +1340,8 @@ describe("service-location.vue", () => {
 
                 const { wrapper } = setupMocks({});
 
+                wrapper.vm.$refs.shopQuestion.initializeComponent = jest.fn();
+
                 // Act
                 await serviceLocation.beforeRouteEnter.call(
                     wrapper.vm,
@@ -1313,6 +1369,8 @@ describe("service-location.vue", () => {
 
                 const { wrapper } = setupMocks({});
 
+                wrapper.vm.$refs.shopQuestion.initializeComponent = jest.fn();
+
                 // Act
                 await serviceLocation.beforeRouteEnter.call(
                     wrapper.vm,
@@ -1342,6 +1400,8 @@ describe("service-location.vue", () => {
 
                 const { wrapper } = setupMocks({});
 
+                wrapper.vm.$refs.shopQuestion.initializeComponent = jest.fn();
+
                 // Act
                 await serviceLocation.beforeRouteEnter.call(
                     wrapper.vm,

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

@@ -3,7 +3,7 @@
         <div class="page-container-grouped-styles">
             <loadingModal ref="loadingModal" />
             <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
-            <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
+            <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="mt-5" />
             <serviceZipModalQuestion
                 v-model="serviceZipCodeQuestion"
                 ref="serviceZipCodeQuestion"
@@ -12,7 +12,8 @@
                 @updated-serviceability="setServiceabilityDetails"
                 @updated-contains-military-base="setContainsMilitaryBase"
                 linkWidgetName="ServiceZipLinkWidget"
-                modalWidgetName="ServiceZipModalWidget" />
+                modalWidgetName="ServiceZipModalWidget"
+                :onZipUpdateCallback="reloadShopData" />
             <alert
                 ref="alertMilitaryBaseZip"
                 class="my-5"
@@ -46,7 +47,7 @@
                 alertClass="alert-warning" />
             <appointmentTypeQuestion
                 v-model="selectedAppointmentType"
-                v-if="!displayNoShopsAlert"
+                v-show="!displayNoShopsAlert"
                 :isServiceableMobile="isServiceableMobile"
                 :isServiceableInshop="isServiceableInshop"
                 ref="appointmentTypeQuestion"
@@ -64,7 +65,19 @@
                 validationRules="mobile-location-required"
                 ref="mobileLocationQuestions"
                 linkWidgetName="MobileLocationLinkWidget"
-                modalWidgetName="MobileLocationModalWidget" />
+                modalWidgetName="MobileLocationModalWidget"
+                :onZipUpdateCallback="reloadShopData" />
+            <Transition name="fade" mode="out-in">
+                <shopQuestion
+                    ref="shopQuestion"
+                    v-show="isShopQuestionDisplayed"
+                    v-model="selectedProviderNumber"
+                    @providerSelected="onProviderSelected"
+                    :serviceZipCode="zipCode"
+                    :selectedAppointmentType="selectedAppointmentType"
+                    :isDisplayed="isShopQuestionDisplayed"
+                    cmsWidgetName="ShopQuestionWidget" />
+            </Transition>
             <contentGroupModal ref="RecalModal" cmsWidgetName="RecalModal" />
             <funnel-footer
                 cmsWidgetName="FunnelFooterWidget"
@@ -82,6 +95,8 @@ 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 appointmentTypeQuestion from "@/layouts/service-location/appointment-type-question/appointment-type-question";
+import shopQuestion from "@/layouts/service-location/shop-question/shop-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";
@@ -119,6 +134,16 @@ defineRule("mobile-location-required", (value) => {
     return true;
 });
 
+const defaultProvider = {
+    providerNumber: null,
+    address: {
+        streetAddress: null,
+        city: null,
+        state: null,
+        zip: null,
+    },
+};
+
 export default {
     name: "service-location",
     data() {
@@ -133,10 +158,12 @@ export default {
             isRecalibrationServiceableInshop: null,
             isGlassServiceableMobile: null,
             isRecalibrationServiceableMobile: null,
+            selectedAppointmentType: this.getSelectedAppointmentType(),
+            selectedProvider: this.getSelectedProvider(),
+            selectedProviderNumber: this.getSelectedProvider().providerNumber,
             mobileFeePart: null,
             zipContainsMilitaryBase: false,
-            selectedAppointmentType: "",
+            zipCodeCtu: null,
-            providerNumber: null,
         };
     },
     async beforeRouteEnter(to, from, next) {
@@ -150,6 +177,8 @@ export default {
 
         const mobileFeePartPromise = getPricedMobileFeePart(serviceZipCode);
 
+        const shopQuestionInitialDataPromise = shopQuestion.methods.loadInitialData(serviceZipCode);
+
         // Settle promises and get results
         const promiseResultMap = [
             {
@@ -168,6 +197,10 @@ export default {
                 resultKey: "zipCodeData",
                 promise: getZipCodeData,
             },
+            {
+                resultKey: "shopQuestionInitialData",
+                promise: shopQuestionInitialDataPromise,
+            },
         ];
 
         const resultMap = await settleAllPromises(promiseResultMap);
@@ -180,6 +213,7 @@ export default {
                 resultMap.serviceabilityDetails,
                 resultMap.mobileFeePart
             );
+            vm.$refs.shopQuestion.initializeComponent(resultMap.shopQuestionInitialData);
         });
     },
     computed: {
@@ -194,7 +228,7 @@ export default {
                 if (newValue.zipCode !== this.zipCode) {
                     this.resetMobileLocation();
                     this.selectedAppointmentType = null;
-                    this.providerNumber = null;
+                    this.selectedProvider = defaultProvider;
                 }
 
                 this.state = newValue.state;
@@ -229,7 +263,7 @@ export default {
                     if (!this.selectedAppointmentType == "Mobile") {
                         this.selectedAppointmentType = null;
                     }
-                    this.providerNumber = null;
+                    this.selectedProvider = defaultProvider;
                 }
             },
         },
@@ -247,6 +281,12 @@ export default {
                 return this.isGlassServiceableInshop;
             }
         },
+        isShopQuestionDisplayed() {
+            return (
+                this.selectedAppointmentType === "Inshop" ||
+                this.selectedAppointmentType === "Dropoff"
+            );
+        },
         // Specifically check for isRecalibrationServiceableMobile === false, not null or true.
         requiresInshopRecalibration() {
             return (
@@ -286,6 +326,7 @@ export default {
         setData(zipCodeData, serviceabilityDetails, mobileFeePart) {
             if (zipCodeData) {
                 this.zipContainsMilitaryBase = zipCodeData.containsMilitaryBase;
+                this.zipCodeCtu = zipCodeData.zipCodeCtu;
             }
 
             if (serviceabilityDetails) {
@@ -313,6 +354,12 @@ export default {
         getServiceZipCodeFromStore() {
             return store.getters.order.serviceLocation.zipCode;
         },
+        getSelectedAppointmentType() {
+            return store.getters.order.serviceLocation.appointmentType;
+        },
+        getSelectedProvider() {
+            return store.getters.order.serviceLocation.provider ?? defaultProvider;
+        },
         setMobileFeePart(mobileFeePart) {
             this.mobileFeePart = mobileFeePart;
         },
@@ -334,8 +381,32 @@ export default {
         backButtonAction() {
             this.$router.navigateWithoutSaving(this.navigationScenarios.CLICKED_BACK, this.$route);
         },
-        forwardButtonAction() {
+        async forwardButtonAction() {
-            this.$router.navigateWithoutSaving(
+            await this.dispatchStoreAction(
+                this.storeActions.SAVE_SERVICE_LOCATION,
+                {
+                    address: this.streetAddress,
+                    address2: this.apartmentNumberOrBusinessName,
+                    city: this.city,
+                    state: this.state,
+                    zipCode: this.zipCode,
+                    zipCodeCtu: this.zipCodeCtu,
+                    appointmentType: this.selectedAppointmentType,
+                    isVehicleProtected: this.isVehicleProtected,
+                    provider: {
+                        providerNumber: this.selectedProvider?.providerNumber,
+                        address: {
+                            streetAddress: this.selectedProvider?.address?.streetAddress,
+                            city: this.selectedProvider?.address?.city,
+                            state: this.selectedProvider?.address?.state,
+                            zip: this.selectedProvider?.address?.zipCode,
+                        },
+                    },
+                },
+                false
+            );
+
+            this.$router.navigateWithSaving(
                 this.navigationScenarios.SELECTED_LOCATION,
                 this.$route
             );
@@ -343,6 +414,12 @@ export default {
         openModalAction(modalName) {
             this.$refs[modalName].openModal();
         },
+        async reloadShopData() {
+            await this.$refs.shopQuestion.reloadShopData(this.zipCode);
+        },
+        onProviderSelected(selectedProvider) {
+            this.selectedProvider = selectedProvider;
+        },
     },
     components: {
         alert,
@@ -355,6 +432,7 @@ export default {
         Form,
         loadingModal,
         contentGroupModal,
+        shopQuestion,
     },
 };
 </script>

src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue

@@ -69,6 +69,9 @@ export default {
         },
         linkWidgetName: String,
         modalWidgetName: String,
+        onZipUpdateCallback: {
+            type: Function,
+        },
     },
     setup() {
         const textboxQuestionWidgetName = "ServiceZipQuestionWidget";
@@ -161,6 +164,10 @@ export default {
                     // Update the page level model
                     this.$emit("update:modelValue", this.internalModel);
 
+                    if (this.onZipUpdateCallback) {
+                        await this.onZipUpdateCallback(serviceZipCode);
+                    }
+
                     this.closeModal();
                 }
             } else {

src/layouts/service-location/shop-question/shop-list-button/shop-list-button.spec.js

@@ -0,0 +1,70 @@
+import { mount } from "@vue/test-utils";
+import shopListButton from "./shop-list-button";
+import inputButtonWrapperMixin from "@/mixins/input-button-wrapper-mixin";
+
+describe("service-package-radio.vue", () => {
+    it("Should include buttonLabel in html", async () => {
+        // Arrange
+        let { wrapper } = setupMocks({
+            mountOptionsMockData: {
+                propsData: mockProps,
+            },
+        });
+
+        // Act
+        const outputHtml = wrapper.html();
+
+        // Assert
+        expect(outputHtml).toEqual(expect.stringContaining(mockProps["buttonLabel"]));
+    });
+
+    it("Should include buttonLabelSubCopy in html", async () => {
+        // Arrange
+        let { wrapper } = setupMocks({
+            mountOptionsMockData: {
+                propsData: mockProps,
+            },
+        });
+
+        // Act
+        const outputHtml = wrapper.html();
+
+        // Assert
+        expect(outputHtml).toEqual(expect.stringContaining(mockProps["buttonLabelSubCopy"]));
+    });
+
+    it("Should include buttonLabelAuxillaryCopy in html", async () => {
+        // Arrange
+        let { wrapper } = setupMocks({
+            mountOptionsMockData: {
+                propsData: mockProps,
+            },
+        });
+
+        // Act
+        const outputHtml = wrapper.html();
+
+        // Assert
+        expect(outputHtml).toEqual(expect.stringContaining(mockProps["buttonLabelAuxillaryCopy"]));
+    });
+});
+
+const mockProps = {
+    buttonLabel: "buttonLabel test copy",
+    buttonLabelSubCopy: "buttonLabelSubCopy test copy",
+    buttonBodyCopy:
+        "<ul><li>buttonBodyCopy test copy</li><li>2</li><li>3</li><li>4</li><li>5</li></ul>",
+    buttonLabelAuxillaryCopy: "buttonLabelAuxillaryCopy test copy",
+    value: 0,
+    modelValue: 0,
+    groupName: "mockGroup",
+};
+
+function setupMocks({ mountOptionsMockData = {} }) {
+    const wrapper = mount(shopListButton, {
+        ...mountOptionsMockData,
+        mixins: [inputButtonWrapperMixin],
+    });
+
+    return { wrapper };
+}

src/layouts/service-location/shop-question/shop-list-button/shop-list-button.vue

@@ -0,0 +1,179 @@
+<template>
+    <transition name="fade" mode="out-in">
+        <baseInputButton
+            v-bind="$props"
+            buttonWrapperClasses="list-group base-input-button list-button rounded-3 d-flex flex-column w-100 mb-2"
+            v-model="selectedValue">
+            <div
+                :aria-label="buttonLabel"
+                class="button-content list-button-content d-flex flex-column justify-content-center py-3 px-4">
+                <div class="row-one">
+                    <span class="m-0 button-label-copy" :class="textPosition">{{
+                        buttonLabel
+                    }}</span>
+                    <span class="m-0 button-label-sub-copy" :class="textPosition">{{
+                        buttonLabelSubCopy
+                    }}</span>
+                    <div
+                        class="availability-indicator"
+                        :class="availability === 'high' ? 'green' : 'red'">
+                        <span class="m-0 button-auxillary-copy">{{ buttonAuxillaryCopy }}</span>
+                    </div>
+                </div>
+                <span
+                    v-if="buttonBodyCopy"
+                    class="m-0 button-label-sub-copy small"
+                    :class="textPosition"
+                    v-html="buttonBodyCopy"></span>
+                <span v-if="screenReaderOnlyText" class="sr-only">
+                    {{ screenReaderOnlyText }}
+                </span>
+                <loader
+                    v-if="isLoaderDisplayed && selectingInitiatesLoad"
+                    :class="[this.loaderColor, this.loaderPosition]" />
+            </div>
+        </baseInputButton>
+    </transition>
+</template>
+
+<script>
+import loader from "@/ux-components/loader/loader";
+import baseInputButton from "@/digital-components/base-input-button/base-input-button";
+import inputButtonWrapperMixin from "@/mixins/input-button-wrapper-mixin";
+
+export default {
+    name: "shopListButton",
+    mixins: [inputButtonWrapperMixin],
+    props: {
+        loaderColor: String,
+        loaderPosition: {
+            type: String,
+            default: "right",
+        },
+    },
+    data() {
+        return {
+            isLoaderDisplayed: false,
+            availability: "low",
+        };
+    },
+    methods: {
+        displayLoader() {
+            this.isLoaderDisplayed = true;
+        },
+        preHandleAnswerChange() {
+            if (this.selectingInitiatesLoad) {
+                this.displayLoader();
+            }
+        },
+    },
+    components: {
+        loader,
+        baseInputButton,
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+.loader {
+    position: absolute;
+}
+.list-button {
+    outline: none;
+    input[type="radio"],
+    input[type="checkbox"] {
+        position: static; //override bootstrap
+
+        &:focus-visible + .list-button-content {
+            box-shadow: 0 0 0 2.5px $blue;
+        }
+        &:focus + .list-button-content {
+            box-shadow: 0 0 0 2.5px $blue;
+        }
+        &:checked + .list-button-content {
+            color: $black;
+            font-weight: 500;
+            background: $blue-100;
+            box-shadow: 0 0 0 1px $blue;
+        }
+        &:checked:focus + .list-button-content {
+            box-shadow: 0 0 0 2.5px $blue;
+        }
+        &:checked + .list-button-content p,
+        &:checked + .list-button-content span {
+            font-weight: 500;
+        }
+        &:checked + .list-button-content span:nth-child(2) {
+            font-weight: 400;
+            color: $gray-600;
+        }
+    }
+}
+.list-button-content {
+    color: $gray-600;
+    position: relative;
+    background: $white;
+    transition: all 150ms linear;
+    border-radius: $border-radius-lg;
+    border: 1px solid $gray-500;
+    width: 100%;
+    outline: none;
+
+    span {
+        &.small {
+            font-size: 0.75rem;
+            color: $gray-550;
+        }
+    }
+}
+.button-content {
+    .row-one {
+        display: flex;
+        align-items: center;
+        margin-bottom: 0.25rem !important;
+
+        .button-label-copy {
+            flex-grow: 0;
+            line-height: 1.5rem;
+            font-weight: 500;
+        }
+
+        .button-label-sub-copy {
+            flex-grow: 1;
+            line-height: 1.25rem !important;
+            font-weight: 400;
+            font-size: 0.75rem;
+            color: #727676;
+            padding-left: 0.25rem;
+        }
+
+        .availability-indicator {
+            display: none;
+            flex-direction: row;
+            justify-content: center;
+            align-items: center;
+            padding: 0.125rem 1.5rem;
+            gap: 0.25rem;
+            background: #e3f2ea;
+            border-radius: 4.5rem;
+
+            .button-auxillary-copy {
+                justify-content: right;
+                line-height: 1.25rem !important;
+                font-weight: 400;
+                font-size: 0.75rem;
+            }
+
+            .green {
+                color: #006a36;
+                background: #e3f2ea;
+            }
+
+            .red {
+                color: #ac160b;
+                background: #e3f2ea;
+            }
+        }
+    }
+}
+</style>

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

@@ -0,0 +1,592 @@
+import { shallowMount } from "@vue/test-utils";
+import { storeActions } from "@/constants/store-actions";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import shopQuestion from "./shop-question";
+
+jest.mock("@/mixins/base-mixin", () => ({
+    methods: {
+        dispatchStoreAction(action, items, encode) {
+            if (action === mockGetProvidersStoreAction) {
+                return new Promise((resolve) => {
+                    resolve(mockNewShopList);
+                });
+            }
+        },
+        scrollToPageBottom() {},
+    },
+}));
+
+const mockGetProvidersStoreAction = storeActions.GET_PROVIDERS;
+const mockNewShopList = {
+    shopProviders: [
+        {
+            address: {
+                city: "COLUMBUS",
+                country: "US",
+                state: "OH",
+                streetAddress: "1670 HARMON AVE",
+                zipCode: "43223",
+            },
+            distanceInMiles: 15.9727889297435,
+            providerNumber: "006747",
+        },
+        {
+            address: {
+                city: "POWELL",
+                country: "US",
+                state: "OH",
+                streetAddress: "3938 POWELL RD",
+                zipCode: "43065",
+            },
+            distanceInMiles: 16.2690495685233,
+            providerNumber: "003341",
+        },
+        {
+            address: {
+                city: "Columbus",
+                country: "US",
+                state: "OH",
+                streetAddress: "4580 W Broad St",
+                zipCode: "43228",
+            },
+            distanceInMiles: 19.4618116611001,
+            providerNumber: "003342",
+        },
+    ],
+};
+
+const mockCmsContent = {
+    QuestionText: "Select a shop:",
+};
+
+const cmsWidgetName = "ShopQuestionWidget";
+const shopQuestionInitialData = {
+    shopProviders: [
+        {
+            address: {
+                city: "WESTERVILLE",
+                country: "US",
+                state: "OH",
+                streetAddress: "4403 EXECUTIVE PKWY",
+                zipCode: "43081",
+            },
+            distanceInMiles: 5.16769294095201,
+            providerNumber: "003335",
+        },
+        {
+            address: {
+                city: "WORTHINGTON",
+                country: "US",
+                state: "OH",
+                streetAddress: "760 DEARBORN PARK LN",
+                zipCode: "43085",
+            },
+            distanceInMiles: 10.5865432478478,
+            providerNumber: "001820",
+        },
+        {
+            address: {
+                city: "COLUMBUS",
+                country: "US",
+                state: "OH",
+                streetAddress: "5015 N HIGH ST",
+                zipCode: "43214",
+            },
+            distanceInMiles: 11.738869544543,
+            providerNumber: "003343",
+        },
+        {
+            address: {
+                city: "COLUMBUS",
+                country: "US",
+                state: "OH",
+                streetAddress: "1670 HARMON AVE",
+                zipCode: "43223",
+            },
+            distanceInMiles: 15.9727889297435,
+            providerNumber: "006747",
+        },
+        {
+            address: {
+                city: "POWELL",
+                country: "US",
+                state: "OH",
+                streetAddress: "3938 POWELL RD",
+                zipCode: "43065",
+            },
+            distanceInMiles: 16.2690495685233,
+            providerNumber: "003341",
+        },
+        {
+            address: {
+                city: "Columbus",
+                country: "US",
+                state: "OH",
+                streetAddress: "4580 W Broad St",
+                zipCode: "43228",
+            },
+            distanceInMiles: 19.4618116611001,
+            providerNumber: "003342",
+        },
+    ],
+};
+
+const mockMixin = {
+    methods: {
+        getCmsContent: jest.fn((widgetName, cmsFieldName) => {
+            if (widgetName === cmsWidgetName) {
+                return mockCmsContent[cmsFieldName];
+            }
+
+            return null;
+        }),
+    },
+};
+
+describe("shop-question.vue", () => {
+    beforeEach(() => {
+        const container = document.createElement("div");
+        container.scrollTo = jest.fn();
+
+        container.classList.add("page-container-grouped-styles");
+        document.body.appendChild(container);
+    });
+
+    it("Should display first three shops when an appointment type has already been selected", async () => {
+        // Arrange
+        const { wrapper } = setupMocks({
+            mixins: [mockMixin],
+            props: {
+                modelValue: null,
+                serviceZipCode: "43081",
+                selectedAppointmentType: "Dropoff",
+                cmsWidgetName: cmsWidgetName,
+                isDisplayed: true,
+            },
+            mountOptions: {
+                attachTo: document.body,
+            },
+        });
+
+        // Act
+        wrapper.vm.initializeComponent(shopQuestionInitialData);
+
+        await wrapper.vm.$nextTick();
+        await wrapper.vm.$nextTick();
+
+        // Assert
+        expect(wrapper.vm.answers.length).toEqual(3);
+        expect(wrapper.vm.answers).toEqual([
+            {
+                buttonBodyCopy: "4403 Executive Pkwy, Westerville, OH 43081",
+                buttonLabel: "4403 Executive Pkwy",
+                buttonLabelSubCopy: "5 mi",
+                value: "003335",
+            },
+            {
+                buttonBodyCopy: "760 Dearborn Park Ln, Worthington, OH 43085",
+                buttonLabel: "760 Dearborn Park Ln",
+                buttonLabelSubCopy: "10.5 mi",
+                value: "001820",
+            },
+            {
+                buttonBodyCopy: "5015 N High St, Columbus, OH 43214",
+                buttonLabel: "5015 N High St",
+                buttonLabelSubCopy: "11.5 mi",
+                value: "003343",
+            },
+        ]);
+    });
+
+    it("Should display the 'Show more locations' link when there are more than three locations to chose from", async () => {
+        // Arrange
+        const { wrapper } = setupMocks({
+            mixins: [mockMixin],
+            props: {
+                modelValue: {
+                    address: {
+                        city: "POWELL",
+                        country: "US",
+                        state: "OH",
+                        streetAddress: "3938 POWELL RD",
+                        zipCode: "43065",
+                    },
+                    distanceInMiles: 16.2690495685233,
+                    providerNumber: "003341",
+                },
+                serviceZipCode: "43081",
+                selectedAppointmentType: "Dropoff",
+                cmsWidgetName: cmsWidgetName,
+                isDisplayed: true,
+            },
+            mountOptions: {
+                attachTo: document.body,
+            },
+        });
+
+        // Act
+        wrapper.vm.initializeComponent(shopQuestionInitialData);
+
+        await wrapper.vm.$nextTick();
+        await wrapper.vm.$nextTick();
+        await wrapper.vm.$nextTick();
+        await wrapper.vm.$nextTick();
+
+        const showMoreShopsLink = wrapper.findComponent({ ref: "showMoreShopsLink" });
+
+        // Assert
+        expect(showMoreShopsLink.exists()).toBe(true);
+        expect(showMoreShopsLink.isVisible()).toBe(true);
+    });
+
+    it("Should not display the 'Show more locations' link when there are fewer than three locations to chose from", async () => {
+        // Arrange
+        const alsoShopQuestionInitialData = {
+            shopProviders: [
+                {
+                    address: {
+                        city: "WESTERVILLE",
+                        country: "US",
+                        state: "OH",
+                        streetAddress: "4403 EXECUTIVE PKWY",
+                        zipCode: "43081",
+                    },
+                    distanceInMiles: 5.16769294095201,
+                    providerNumber: "003335",
+                },
+                {
+                    address: {
+                        city: "WORTHINGTON",
+                        country: "US",
+                        state: "OH",
+                        streetAddress: "760 DEARBORN PARK LN",
+                        zipCode: "43085",
+                    },
+                    distanceInMiles: 10.5865432478478,
+                    providerNumber: "001820",
+                },
+                {
+                    address: {
+                        city: "COLUMBUS",
+                        country: "US",
+                        state: "OH",
+                        streetAddress: "5015 N HIGH ST",
+                        zipCode: "43214",
+                    },
+                    distanceInMiles: 11.738869544543,
+                    providerNumber: "003343",
+                },
+            ],
+        };
+
+        const { wrapper } = setupMocks({
+            mixins: [mockMixin],
+            props: {
+                modelValue: {
+                    address: {
+                        city: "POWELL",
+                        country: "US",
+                        state: "OH",
+                        streetAddress: "3938 POWELL RD",
+                        zipCode: "43065",
+                    },
+                    distanceInMiles: 16.2690495685233,
+                    providerNumber: "003341",
+                },
+                serviceZipCode: "43081",
+                selectedAppointmentType: "Dropoff",
+                cmsWidgetName: cmsWidgetName,
+                isDisplayed: true,
+            },
+            mountOptions: {
+                attachTo: document.body,
+            },
+        });
+
+        // Act
+        wrapper.vm.initializeComponent(alsoShopQuestionInitialData);
+
+        await wrapper.vm.$nextTick();
+
+        const showMoreShopsLink = wrapper.findComponent({ ref: "showMoreShopsLink" });
+
+        // Assert
+        expect(showMoreShopsLink.exists()).toBe(true);
+        expect(showMoreShopsLink.isVisible()).toBe(false);
+    });
+
+    it("Should display the next three shops when the 'Show more location' link is clicked", async () => {
+        // Arrange
+        const displayedAnswers = [
+            {
+                buttonBodyCopy: "4403 Executive Pkwy, Westerville, OH 43081",
+                buttonLabel: "4403 Executive Pkwy",
+                buttonLabelSubCopy: "5 mi",
+                value: "003335",
+            },
+            {
+                buttonBodyCopy: "760 Dearborn Park Ln, Worthington, OH 43085",
+                buttonLabel: "760 Dearborn Park Ln",
+                buttonLabelSubCopy: "10.5 mi",
+                value: "001820",
+            },
+            {
+                buttonBodyCopy: "5015 N High St, Columbus, OH 43214",
+                buttonLabel: "5015 N High St",
+                buttonLabelSubCopy: "11.5 mi",
+                value: "003343",
+            },
+        ];
+
+        const { wrapper } = setupMocks({
+            mixins: [mockMixin],
+            props: {
+                modelValue: {
+                    address: {
+                        city: "POWELL",
+                        country: "US",
+                        state: "OH",
+                        streetAddress: "3938 POWELL RD",
+                        zipCode: "43065",
+                    },
+                    distanceInMiles: 16.2690495685233,
+                    providerNumber: "003341",
+                },
+                serviceZipCode: "43081",
+                selectedAppointmentType: "Dropoff",
+                cmsWidgetName: cmsWidgetName,
+                isDisplayed: true,
+            },
+            mountOptions: {
+                attachTo: document.body,
+            },
+        });
+
+        // Act
+        wrapper.vm.initializeComponent(shopQuestionInitialData);
+
+        await wrapper.vm.$nextTick();
+
+        wrapper.vm.answers = displayedAnswers;
+        wrapper.vm.shopIndex = 3;
+
+        await wrapper.vm.$nextTick();
+        await wrapper.vm.$nextTick();
+        await wrapper.vm.$nextTick();
+        await wrapper.vm.$nextTick();
+
+        const showMoreShopsLink = wrapper.findComponent({ ref: "showMoreShopsLink" });
+
+        await wrapper.vm.$nextTick();
+
+        showMoreShopsLink.trigger("click");
+
+        await wrapper.vm.$nextTick();
+
+        // Assert
+        expect(wrapper.vm.answers.length).toBe(6);
+        expect(wrapper.vm.answers).toEqual([
+            {
+                buttonBodyCopy: "4403 Executive Pkwy, Westerville, OH 43081",
+                buttonLabel: "4403 Executive Pkwy",
+                buttonLabelSubCopy: "5 mi",
+                value: "003335",
+            },
+            {
+                buttonBodyCopy: "760 Dearborn Park Ln, Worthington, OH 43085",
+                buttonLabel: "760 Dearborn Park Ln",
+                buttonLabelSubCopy: "10.5 mi",
+                value: "001820",
+            },
+            {
+                buttonBodyCopy: "5015 N High St, Columbus, OH 43214",
+                buttonLabel: "5015 N High St",
+                buttonLabelSubCopy: "11.5 mi",
+                value: "003343",
+            },
+            {
+                buttonBodyCopy: "1670 Harmon Ave, Columbus, OH 43223",
+                buttonLabel: "1670 Harmon Ave",
+                buttonLabelSubCopy: "16 mi",
+                value: "006747",
+            },
+            {
+                buttonBodyCopy: "3938 Powell Rd, Powell, OH 43065",
+                buttonLabel: "3938 Powell Rd",
+                buttonLabelSubCopy: "16.5 mi",
+                value: "003341",
+            },
+            {
+                buttonBodyCopy: "4580 W Broad St, Columbus, OH 43228",
+                buttonLabel: "4580 W Broad St",
+                buttonLabelSubCopy: "19.5 mi",
+                value: "003342",
+            },
+        ]);
+    });
+
+    it("Should display the number of shops necessary to show a previously selected shop", async () => {
+        // Arrange
+        const selectedProvider = {
+            providerNumber: "003341",
+        };
+
+        const { wrapper } = setupMocks({
+            mixins: [mockMixin],
+            props: {
+                modelValue: selectedProvider.providerNumber,
+                serviceZipCode: "43081",
+                selectedAppointmentType: "Dropoff",
+                cmsWidgetName: cmsWidgetName,
+            },
+            mountOptions: {
+                attachTo: document.body,
+            },
+        });
+
+        // Act
+        wrapper.vm.initializeComponent(shopQuestionInitialData);
+
+        await wrapper.vm.$nextTick();
+        await wrapper.vm.$nextTick();
+        await wrapper.vm.$nextTick();
+
+        // Assert
+        expect(wrapper.vm.answers.length).toEqual(5);
+    });
+
+    it("Should reset the answers when the selected appointment type changes", async () => {
+        // Arrange
+        const { wrapper } = setupMocks({
+            mixins: [mockMixin],
+            props: {
+                modelValue: {
+                    address: {
+                        city: "POWELL",
+                        country: "US",
+                        state: "OH",
+                        streetAddress: "3938 POWELL RD",
+                        zipCode: "43065",
+                    },
+                    distanceInMiles: 16.2690495685233,
+                    providerNumber: "003341",
+                },
+                serviceZipCode: "43081",
+                selectedAppointmentType: "Dropoff",
+                cmsWidgetName: cmsWidgetName,
+            },
+            mountOptions: {
+                attachTo: document.body,
+            },
+        });
+
+        // Act
+        wrapper.vm.initializeComponent(shopQuestionInitialData);
+
+        await wrapper.vm.$nextTick();
+
+        await wrapper.setProps({
+            selectedAppointmentType: "Inshop",
+        });
+
+        await wrapper.vm.$nextTick();
+
+        // Assert
+        expect(wrapper.vm.answers.length).toEqual(3);
+    });
+
+    // it("Should reload the shops when the service zip code changes", async () => {
+    //     // Arrange
+    //     const { wrapper } = setupMocks({
+    //         mixins: [mockMixin],
+    //         props: {
+    //             modelValue: {
+    //                 address: {
+    //                     city: "POWELL",
+    //                     country: "US",
+    //                     state: "OH",
+    //                     streetAddress: "3938 POWELL RD",
+    //                     zipCode: "43065",
+    //                 },
+    //                 distanceInMiles: 16.2690495685233,
+    //                 providerNumber: "003341",
+    //             },
+    //             serviceZipCode: "43081",
+    //             selectedAppointmentType: "Dropoff",
+    //             cmsWidgetName: cmsWidgetName,
+    //             isDisplayed: true
+    //         },
+    //         mountOptions: {
+    //             attachTo: document.body,
+    //         },
+    //     });
+
+    //     wrapper.vm.$options.methods.loadInitialData = jest.fn().mockImplementation(() => {
+    //         return new Promise((resolve) => {
+    //             resolve(mockNewShopList);
+    //         });
+    //     });
+
+    //     // Act
+    //     wrapper.vm.initializeComponent(shopQuestionInitialData);
+
+    //     await wrapper.vm.$options.watch.serviceZipCode.handler.call(wrapper.vm, "43054");
+
+    //     // Assert
+    //     expect(wrapper.vm.shopProviders.length).toEqual(3);
+    //     expect(wrapper.vm.shopProviders).toEqual(mockNewShopList.shopProviders);
+    // });
+
+    // it("Should clear the existing answers when the service zip code changes", async () => {
+    //     // Arrange
+    //     const { wrapper } = setupMocks({
+    //         mixins: [mockMixin],
+    //         props: {
+    //             modelValue: {
+    //                 address: {
+    //                     city: "POWELL",
+    //                     country: "US",
+    //                     state: "OH",
+    //                     streetAddress: "3938 POWELL RD",
+    //                     zipCode: "43065",
+    //                 },
+    //                 distanceInMiles: 16.2690495685233,
+    //                 providerNumber: "003341",
+    //             },
+    //             serviceZipCode: "43081",
+    //             selectedAppointmentType: "Dropoff",
+    //             cmsWidgetName: cmsWidgetName,
+    //         },
+    //         mountOptions: {
+    //             attachTo: document.body,
+    //         },
+    //     });
+
+    //     //Act
+    //     wrapper.vm.initializeComponent(shopQuestionInitialData);
+
+    //     wrapper.setProps({
+    //         selectedAppointmentType: "Inshop",
+    //     });
+
+    //     await wrapper.vm.$nextTick();
+
+    //     // Assert
+    //     expect(wrapper.vm.answers.length).toEqual(3);
+    // });
+});
+
+function setupMocks({ mountOptions, mixins, props, isShallowMount = true }) {
+    const resultingMountOptions = getMountOptions({
+        ...mountOptions,
+        mixins,
+    });
+
+    if (props) resultingMountOptions.propsData = props;
+
+    const wrapper = isShallowMount
+        ? shallowMount(shopQuestion, resultingMountOptions)
+        : mount(shopQuestion, resultingMountOptions);
+
+    return { wrapper };
+}

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

@@ -0,0 +1,252 @@
+<template>
+    <transition name="fade" mode="out-in">
+        <div v-if="isDisplayed" class="shop-question" aria-live="polite">
+            <alert
+                ref="alertDropoffInformation"
+                v-if="displayDropoffInformation"
+                class="mb-4 drop-off-alert"
+                cmsWidgetName="AlertDropoffInformationWidget"
+                alertClass="alert-info"
+                v-bind:isDismissible="false" />
+            <buttonQuestion
+                ref="buttonQuestion"
+                buttonTypeString="shopListButton"
+                :buttonTypeObject="shopListButton"
+                class="radioQuestion"
+                :questionText="questionText"
+                :answers="answers"
+                groupName="chooseShop"
+                textPosition="text-start"
+                v-model="selectedValue"
+                isRequired
+                validationRules="option-required" />
+            <textLink
+                v-show="displaySeeMoreLocationsLink"
+                ref="showMoreShopsLink"
+                class="show-more-shops-link"
+                id="showMoreShopsId"
+                cmsWidgetName="ShowMoreShopsLinkWidget"
+                linkType="text"
+                :text="showMoreShopsLinkText"
+                href="#!"
+                @click-event="getNextShopsFromList"
+                :aria-label="showMoreShopsLinkText" />
+        </div>
+    </transition>
+</template>
+
+<script>
+// Components
+import alert from "@/ux-components/alert/alert";
+import buttonQuestion from "@/digital-components/button-question/button-question";
+import shopListButton from "./shop-list-button/shop-list-button";
+import textLink from "@/ux-components/text-link/text-link";
+
+import { storeActions } from "@/constants/store-actions.js";
+
+// Supporting files
+import { defineRule } from "vee-validate";
+import { required } from "@/helpers/validation-rules";
+import { errorMessages } from "@/constants/error-messages";
+import baseMixin from "@/mixins/base-mixin.js";
+import { nextTick } from "vue";
+
+defineRule("option-required", required(errorMessages.OPTION_REQUIRED));
+
+export default {
+    name: "shop-question",
+    mixins: [baseMixin],
+    data() {
+        return {
+            shopProviders: [],
+            shopListButton: shopListButton,
+            answers: [],
+            shopIndex: 0,
+            displaySeeMoreLocationsLink: false,
+        };
+    },
+    props: {
+        modelValue: {
+            type: Object,
+        },
+        serviceZipCode: String,
+        selectedAppointmentType: String,
+        cmsWidgetName: String,
+        validationRules: String,
+        isDisplayed: Boolean,
+    },
+    computed: {
+        questionText() {
+            return this.getCmsContent(this.cmsWidgetName, "QuestionText");
+        },
+        selectedValue: {
+            get: function () {
+                return this.modelValue;
+            },
+            set: function (newValue) {
+                // Button Question only supports primitive values so we must get the full object to emit to the page
+                const provider = this.shopProviders?.find(
+                    (provider) => provider.providerNumber == newValue
+                );
+
+                this.$emit("update:modelValue", newValue);
+                this.$emit("providerSelected", provider);
+            },
+        },
+        displayDropoffInformation() {
+            return this.selectedAppointmentType == "Dropoff";
+        },
+        showMoreShopsLinkText() {
+            return this.getCmsContent("ShowMoreShopsLinkWidget", "Text");
+        },
+    },
+    methods: {
+        loadInitialData(serviceZipCode) {
+            return this.loadData(serviceZipCode);
+        },
+        loadData(serviceZipCode) {
+            return baseMixin.methods.dispatchStoreAction(storeActions.GET_PROVIDERS, {
+                serviceZipCode: serviceZipCode,
+            });
+        },
+        initializeComponent(shopQuestionInitialData) {
+            this.shopProviders = shopQuestionInitialData.shopProviders;
+        },
+        async getNextShopsFromList(numberToGet = 3) {
+            const shopIterator = (array, n) => {
+                const l = array.length;
+                return () => {
+                    const end = this.shopIndex + n;
+                    const part = array.slice(this.shopIndex, end);
+                    this.shopIndex = end < l ? end : this.shopProviders.length;
+                    return part;
+                };
+            };
+
+            const toTitleCase = (str) => {
+                return str.replace(/\w\S*/g, function (txt) {
+                    return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
+                });
+            };
+
+            const nextShop = shopIterator(this.shopProviders, numberToGet);
+
+            // Map API result data
+            const mappedData = nextShop().map((shopProvider) => {
+                const streetAddress = toTitleCase(shopProvider.address.streetAddress);
+                const city = toTitleCase(shopProvider.address.city);
+                const state = shopProvider.address.state;
+                const zipCode = shopProvider.address.zipCode;
+                const distanceInMiles = Math.round(shopProvider.distanceInMiles * 2) / 2;
+
+                return {
+                    buttonLabel: streetAddress,
+                    buttonLabelSubCopy: `${distanceInMiles} mi`,
+                    buttonBodyCopy: `${streetAddress}, ${city}, ${state} ${zipCode}`,
+                    value: shopProvider.providerNumber,
+                };
+            });
+
+            if (this.answers.length === 0) {
+                this.answers = mappedData;
+            } else {
+                mappedData.forEach((shop) => {
+                    this.answers.push(shop);
+                });
+            }
+
+            await this.$nextTick();
+
+            if (this.shopIndex == this.shopProviders.length) {
+                this.displaySeeMoreLocationsLink = false;
+            } else {
+                this.displaySeeMoreLocationsLink = true;
+            }
+
+            await this.$nextTick();
+
+            this.scrollToPageBottom();
+        },
+        resetAnswers() {
+            this.answers = [];
+            this.shopIndex = 0;
+            this.selectedValue = "";
+
+            if (this.$refs.buttonQuestion) {
+                this.$refs.buttonQuestion.resetField();
+            }
+        },
+        async reloadShopData(serviceZipCode) {
+            const result = await this.loadData(serviceZipCode);
+            this.initializeComponent(result.data);
+
+            this.resetAnswers();
+
+            await nextTick();
+            await this.getNextShopsFromList();
+        },
+    },
+    watch: {
+        selectedAppointmentType: {
+            async handler(newValue) {
+                this.resetAnswers();
+
+                await this.$nextTick();
+
+                if (newValue !== "Mobile") {
+                    await this.getNextShopsFromList();
+                }
+            },
+        },
+        shopProviders: {
+            async handler(newValue) {
+                //this.resetAnswers();
+
+                await this.$nextTick();
+
+                if (this.selectedAppointmentType) {
+                    const selectedShopIndex = newValue.findIndex(
+                        (provider) => provider.providerNumber == this.modelValue
+                    );
+
+                    if (selectedShopIndex >= 3) {
+                        await this.getNextShopsFromList(selectedShopIndex + 1);
+                    } else {
+                        await this.getNextShopsFromList();
+                    }
+                }
+            },
+        },
+    },
+    components: {
+        alert,
+        buttonQuestion,
+        textLink,
+    },
+};
+</script>
+
+<style lang="scss">
+.shop-question {
+    margin-top: 1rem !important;
+    text-align: center !important;
+
+    .button-question {
+        .question-text {
+            margin-top: 0.5rem !important;
+        }
+    }
+}
+
+.drop-off-alert {
+    .alert-heading {
+        text-align: left;
+        font-size: 0.75rem !important;
+        line-height: 1.25rem !important;
+    }
+
+    margin-top: 0.5rem !important;
+    padding-left: 1.5rem !important;
+    padding-right: 0.5rem !important;
+}
+</style>

src/layouts/vin-lookup/vin-information/vin-information.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="vin-information">
-        <div class="vin-toggle mt-2" :class="[isActive ? 'active' : '']" @click="toggleClass()">
+        <div class="vin-toggle" :class="[isActive ? 'active' : '']" @click="toggleClass()">
             <textLink linkType="text" href="#!" :text="WhereCanIFindMyVINHeadline" />
         </div>
         <div class="vin-info">

src/layouts/vin-lookup/vin-lookup.vue

@@ -36,12 +36,12 @@
                             alertClass="alert-danger" />
                     </div>
                 </div>
-                <div class="row mb-2">
+                <div class="row">
                     <div class="col">
                         <vinInformation />
                     </div>
                 </div>
-                <div class="row my-2">
+                <div class="row mb-0 mt-4">
                     <div class="col">
                         <textboxQuestion
                             cmsWidgetName="ServiceZipQuestionWidget"
@@ -52,7 +52,7 @@
                             validationRules="zip-required|zip-format" />
                     </div>
                 </div>
-                <div class="row mt-2">
+                <div class="row mt-4">
                     <div class="col">
                         <textboxQuestion
                             cmsWidgetName="EmailAddressQuestionWidget"

src/mixins/analytics-mixin.js

@@ -146,18 +146,18 @@ export default {
                 false
             );
 
-            if (response.data) {
+            if (response?.data) {
-                if (response.data.sessionKey && skey === 0) {
+                if (response?.data.sessionKey && skey === 0) {
                     setCookieProperties(
-                        { [cookieNames.SESSION_KEY]: response.data.sessionKey },
+                        { [cookieNames.SESSION_KEY]: response?.data.sessionKey },
                         {
                             useDefaultFunnelCookieAttributes: false,
                         }
                     );
                 }
-                if (response.data.sessionId && sid === "00000000-0000-0000-0000-000000000000") {
+                if (response?.data.sessionId && sid === "00000000-0000-0000-0000-000000000000") {
                     setCookieProperties(
-                        { [cookieNames.SESSION_ID]: response.data.sessionId },
+                        { [cookieNames.SESSION_ID]: response?.data.sessionId },
                         {
                             maxAge: 60 * 30, // 30 minutes
                         }

src/mixins/base-mixin.js

@@ -99,6 +99,14 @@ export default {
         getTotalLineItemPrice(lineItem) {
             return lineItem.kitPrice + lineItem.laborAmount + lineItem.sellingPrice;
         },
+        scrollToPageTop() {
+            const container = document.getElementsByClassName("page-container-grouped-styles")[0];
+            container.scrollTo({ top: 0, left: 0, behavior: "smooth" });
+        },
+        scrollToPageBottom() {
+            const container = document.getElementsByClassName("page-container-grouped-styles")[0];
+            container.scrollTo({ top: container.scrollHeight, left: 0, behavior: "smooth" });
+        },
     },
     computed: {
         storeActions() {

src/router/index.js

@@ -31,6 +31,7 @@ import { applicationConfig } from "../constants/application-config";
 // Components
 import datePicker from "@/digital-components/date-picker/date-picker.vue";
 import demoDatePicker from "@/layouts/demo-date-picker/demo-date-picker.vue";
+import review from "@/layouts/review/review";
 
 const routes = [
     {
@@ -43,6 +44,11 @@ const routes = [
         name: "date-picker",
         component: datePicker,
     },
+    {
+        path: "/review", // This is a temporary route for testing.
+        name: "review",
+        component: review,
+    },
     {
         path: "/",
         name: "root",

src/store/index.js

@@ -44,6 +44,15 @@ const getDefaultState = () => {
                 zipCode: null,
                 zipCodeCtu: null,
                 appointmentType: null,
+                provider: {
+                    providerNumber: null,
+                    address: {
+                        streetAddress: null,
+                        city: null,
+                        state: null,
+                        zip: null,
+                    },
+                },
             },
             customer: {
                 emailAddress: null,
@@ -70,6 +79,12 @@ const getDefaultState = () => {
                 },
                 parentAccountNumber: 0,
             },
+            schedule: {
+                date: null,
+                startTime: null,
+                endTime: null,
+                routeCode: null,
+            },
             referralNumber: null,
             referralDate: null,
             referralCorrelationId: null,
@@ -226,10 +241,34 @@ export const mutations = {
     },
     updateServiceLocation(state, serviceLocationInfo) {
         state.order.serviceLocation.address = serviceLocationInfo.address;
+        state.order.serviceLocation.address2 = serviceLocationInfo.address2;
         state.order.serviceLocation.city = serviceLocationInfo.city;
         state.order.serviceLocation.state = serviceLocationInfo.state;
         state.order.serviceLocation.zipCode = serviceLocationInfo.zipCode;
         state.order.serviceLocation.zipCodeCtu = serviceLocationInfo.zipCodeCtu;
+        state.order.serviceLocation.appointmentType = serviceLocationInfo.appointmentType;
+        state.order.serviceLocation.isVehicleProtected = serviceLocationInfo.isVehicleProtected;
+
+        if (serviceLocationInfo.provider) {
+            state.order.serviceLocation.provider.providerNumber =
+                serviceLocationInfo.provider?.providerNumber;
+            state.order.serviceLocation.provider.address.streetAddress =
+                serviceLocationInfo.provider?.address?.streetAddress;
+            state.order.serviceLocation.provider.address.city =
+                serviceLocationInfo.provider?.address?.city;
+            state.order.serviceLocation.provider.address.state =
+                serviceLocationInfo.provider?.address?.state;
+            state.order.serviceLocation.provider.address.zip =
+                serviceLocationInfo.provider?.address?.zip;
+        }
+    },
+    updateSchedule(state, scheduleInfo) {
+        if (scheduleInfo) {
+            state.order.schedule.date = scheduleInfo.date;
+            state.order.schedule.startTime = scheduleInfo.startTime;
+            state.order.schedule.endTime = scheduleInfo.endTime;
+            state.order.schedule.routeCode = scheduleInfo.routeCode;
+        }
     },
 
     // applicationUser MUTATIONS
@@ -358,15 +397,31 @@ export const mutations = {
         state.order.lineItems.serverData = sessionInformation.order.lineItems.serverData;
         state.order.payment.parentAccountNumber =
             sessionInformation.order.payment.parentAccountNumber;
-        state.order.providerNumber = sessionInformation.order.providerNumber;
         (state.order.serviceLocation.address =
             sessionInformation.order.serviceLocation.streetAddress),
+            (state.order.serviceLocation.address2 =
+                sessionInformation.order.serviceLocation.address2),
             (state.order.serviceLocation.city = sessionInformation.order.serviceLocation.city),
             (state.order.serviceLocation.state = sessionInformation.order.serviceLocation.state),
             (state.order.serviceLocation.zipCode =
                 sessionInformation.order.serviceLocation.zipCode),
             (state.order.serviceLocation.zipCodeCtu =
                 sessionInformation.order.serviceLocation.zipCodeCtu);
+        state.order.serviceLocation.appointmentType =
+            sessionInformation.order.serviceLocation.appointmentType;
+        state.order.serviceLocation.isVehicleProtected =
+            sessionInformation.order.serviceLocation.isVehicleProtected;
+
+        state.order.serviceLocation.provider.providerNumber =
+            sessionInformation.order.serviceLocation.provider?.providerNumber;
+        state.order.serviceLocation.provider.address.streetAddress =
+            sessionInformation.order.serviceLocation.provider?.address?.streetAddress;
+        state.order.serviceLocation.provider.address.city =
+            sessionInformation.order.serviceLocation.provider?.address?.city;
+        state.order.serviceLocation.provider.address.state =
+            sessionInformation.order.serviceLocation.provider?.address?.state;
+        state.order.serviceLocation.provider.address.zip =
+            sessionInformation.order.serviceLocation.provider?.address?.zip;
 
         state.order.payment.isInsurance = sessionInformation.order.payment.isInsurance;
         state.order.payment.insuranceCoverage.isVerified =
@@ -380,6 +435,11 @@ export const mutations = {
         state.applicationUser.crmCustomerId = sessionInformation.applicationUser.crmCustomerId;
         state.applicationUser.pageData = sessionInformation.applicationUser.pageData;
         state.applicationUser.lastPage = sessionInformation.applicationUser.lastPage;
+
+        state.order.schedule.date = sessionInformation.order.schedule?.date;
+        state.order.schedule.startTime = sessionInformation.order.schedule?.startTime;
+        state.order.schedule.endTime = sessionInformation.order.schedule?.endTime;
+        state.order.schedule.routeCode = sessionInformation.order.schedule?.routeCode;
     },
     updateExperiments(state, experiments) {
         state.applicationUser.experiments = experiments;
@@ -681,6 +741,15 @@ export const actions = {
         });
     },
 
+    // Location API Actions
+    getAlertReasonsByCtu(context, { ctu }) {
+        return globalMethods.callHttpClient({
+            method: endpoints.GetAlertReasons.method,
+            endpoint: `${endpoints.GetAlertReasons.url}/${ctu}`,
+            payload: {},
+        });
+    },
+
     // Misc Actions
     updateStoreWithSaveSessionResponse(
         context,
@@ -727,12 +796,21 @@ export const actions = {
             experimentsForUser: experimentsForUser,
         };
 
-        return globalMethods.callHttpClient({
+        return globalMethods
-            method: endpoints.LogPageView.method,
+            .callHttpClient({
-            endpoint: endpoints.LogPageView.url,
+                method: endpoints.LogPageView.method,
-            payload: payload,
+                endpoint: endpoints.LogPageView.url,
-            logApiCall: false,
+                payload: payload,
-        });
+                logApiCall: false,
+            })
+            .then(
+                (response) => {
+                    return response;
+                },
+                (error) => {
+                    console.log("Analytics Service Error: " + error.data);
+                }
+            );
     },
     logCustomEvent(
         context,
@@ -763,12 +841,21 @@ export const actions = {
             experimentsForUser: experimentsForUser,
         };
 
-        return globalMethods.callHttpClient({
+        return globalMethods
-            method: endpoints.LogCustomEvent.method,
+            .callHttpClient({
-            endpoint: endpoints.LogCustomEvent.url,
+                method: endpoints.LogCustomEvent.method,
-            payload: payload,
+                endpoint: endpoints.LogCustomEvent.url,
-            logApiCall: false,
+                payload: payload,
-        });
+                logApiCall: false,
+            })
+            .then(
+                (response) => {
+                    return response;
+                },
+                (error) => {
+                    console.log("Analytics Service Error: " + error.data);
+                }
+            );
     },
     initializeSession(context, { userId, sessionId, userAgent, referrer }) {
         var payload = {
@@ -782,12 +869,21 @@ export const actions = {
             referrer: referrer,
         };
 
-        return globalMethods.callHttpClient({
+        return globalMethods
-            method: endpoints.InitializeSession.method,
+            .callHttpClient({
-            endpoint: endpoints.InitializeSession.url,
+                method: endpoints.InitializeSession.method,
-            payload: payload,
+                endpoint: endpoints.InitializeSession.url,
-            logApiCall: false,
+                payload: payload,
-        });
+                logApiCall: false,
+            })
+            .then(
+                (response) => {
+                    return response;
+                },
+                (error) => {
+                    console.log("Analytics Service Error: " + error.data);
+                }
+            );
     },
 
     // Misc Actions
@@ -927,13 +1023,13 @@ export const actions = {
     },
 
     getMobileFeePart(context) {
-        const serviceType = context.getters.damage.isRepair ? "Repair" : "Replace";
+        const damageType = context.getters.damage.isRepair ? "Repair" : "Replace";
         const parentAccountNumber = context.getters.payment.parentAccountNumber;
         const billToAccountNumber = 87291; // TODO: MAKE THIS REAL
 
         return globalMethods.callHttpClient({
             method: endpoints.GetMobileFeePart.method,
-            endpoint: `${endpoints.GetMobileFeePart.url}/${serviceType}/${parentAccountNumber}/${billToAccountNumber}`,
+            endpoint: `${endpoints.GetMobileFeePart.url}/${damageType}/${parentAccountNumber}/${billToAccountNumber}`,
         });
     },
 
@@ -943,13 +1039,34 @@ export const actions = {
                 partNumber: lineItem.partNumber,
             })
         );
-        const lineItemsToSend = buildQueryStringParameterFromArrayOfComplexObjects(
+        const lineItems = buildQueryStringParameterFromArrayOfComplexObjects(
             lineItemsWithOnlyPartNumbers,
             "lineItems"
         );
+
+        const vehicle = context.getters.vehicle;
+        const carId = vehicle.carId;
+        const damage = context.getters.damage;
+        const glassArray = convertGlassPieceNamingForApi(damage.glassToReplace);
+
+        const glassPieces = buildQueryStringParameterFromArrayOfComplexObjects(
+            glassArray,
+            "glassPieces"
+        );
+
         return globalMethods.callHttpClient({
             method: endpoints.GetServiceabilityDetails.method,
-            endpoint: `${endpoints.GetServiceabilityDetails.url}?zip=${serviceZipCode}&${lineItemsToSend}`,
+            endpoint: `${endpoints.GetServiceabilityDetails.url}?zip=${serviceZipCode}&carId=${carId}&${lineItems}&${glassPieces}`,
+        });
+    },
+
+    getProviders(context, { serviceZipCode }) {
+        const damageType = context.getters.damage.isRepair ? "Repair" : "Replace";
+        const shopRadiusInMiles = 100;
+
+        return globalMethods.callHttpClient({
+            method: endpoints.GetProviders.method,
+            endpoint: `${endpoints.GetProviders.url}/${serviceZipCode}/${damageType}/${shopRadiusInMiles}`,
         });
     },
 
@@ -964,7 +1081,7 @@ export const actions = {
             endpoint: endpoints.GetSupportingItems.url,
             payload: {
                 carId: carId,
-                serviceType: isRepair ? "Repair" : "Replace",
+                damageType: isRepair ? "Repair" : "Replace",
                 parentAccountNumber: applicationConfig.CASH_PARENT_ACCOUNT_NUMBER,
                 parts: glassPartsArray,
                 numberOfRepairChips: isRepair ? numberOfChips : 0,
@@ -1098,13 +1215,31 @@ export const actions = {
                         isInsurance: order.payment.isInsurance ?? false,
                         parentAccountNumber: order.payment.parentAccountNumber,
                     },
-                    providerNumber: "",
                     serviceLocation: {
                         streetAddress: order.serviceLocation.address,
+                        streetAddress2: order.serviceLocation.address2,
                         city: order.serviceLocation.city,
                         state: order.serviceLocation.state,
                         zipCode: order.serviceLocation.zipCode,
                         zipCodeCtu: order.serviceLocation.zipCodeCtu,
+                        appointmentType: order.serviceLocation.appointmentType,
+                        isVehicleProtected: order.serviceLocation.isVehicleProtected,
+                        provider: {
+                            providerNumber: order.serviceLocation.provider?.providerNumber,
+                            address: {
+                                streetAddress:
+                                    order.serviceLocation.provider?.address?.streetAddress,
+                                city: order.serviceLocation.provider?.address?.city,
+                                state: order.serviceLocation.provider?.address?.state,
+                                zip: order.serviceLocation.provider?.address?.zip,
+                            },
+                        },
+                    },
+                    schedule: {
+                        date: order.schedule?.date,
+                        startTime: order.schedule?.startTime,
+                        endTime: order.schedule?.endTime,
+                        routeCode: order.schedule?.routeCode,
                     },
                     existingPromoCode: null,
                     referralCorrelationId: order.referralCorrelationId,
@@ -1549,6 +1684,9 @@ export const actions = {
         return availableLineItems;
     },
     // Misc order actions
+    saveSchedule(context, scheduleInfo) {
+        context.commit(storeMutations.UPDATE_SCHEDULE, scheduleInfo);
+    },
     saveServiceLocation(context, serviceLocationInfo) {
         context.commit(storeMutations.UPDATE_SERVICE_LOCATION, serviceLocationInfo);
     },