Just needs styling tweaks and de-mocked

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

@@ -66,12 +66,12 @@
                 modalWidgetName="MobileLocationModalWidget" />
             <shopQuestion
                 ref="shopQuestion"
-                v-show="
+                v-if="selectedAppointmentType === 'Inshop' || selectedAppointmentType === 'Dropoff'"
-                    selectedAppointmentType === 'Dropoff' || selectedAppointmentType === 'Inshop'
+                v-model="selectedShop"
-                "
                 :isDropoff="isDropoff"
                 :serviceZipCode="zipCode"
                 :selectedAppointmentType="selectedAppointmentType"
+                :shopQuestionInitialData="shopQuestionInitialData"
                 cmsWidgetName="ShopQuestionWidget" />
             <contentGroupModal ref="RecalModal" cmsWidgetName="RecalModal" />
             <funnel-footer
@@ -147,6 +147,8 @@ export default {
             zipContainsMilitaryBase: false,
             selectedAppointmentType: "",
             providerNumber: null,
+            shopQuestionInitialData: null,
+            selectedShop: "",
         };
     },
     async beforeRouteEnter(to, from, next) {
@@ -194,9 +196,9 @@ export default {
             vm.setData(
                 resultMap.zipCodeData,
                 resultMap.serviceabilityDetails,
-                resultMap.mobileFeePart
+                resultMap.mobileFeePart,
+                resultMap.shopQuestionInitialData
             );
-            vm.$refs.shopQuestion.initializeComponent(resultMap.shopQuestionInitialData);
         });
     },
     computed: {
@@ -264,15 +266,16 @@ export default {
                 return this.isGlassServiceableInshop;
             }
         },
-        isDualOrStaticRecalibration() {
+        // Specifically check for isRecalibrationServiceableMobile === false, not null or true.
-            const supportingItems = store.getters.lineItems.supportingItems;
+        requiresInshopRecalibration() {
-
+            return (
-            return supportingItems.some(
+                this.isServiceableInshop &&
-                (item) => item.partNumber === "RECAL STATIC" || item.partNumber === "RECAL DUAL"
+                this.isGlassServiceableMobile &&
+                this.isRecalibrationServiceableMobile === false
             );
         },
         displayRecalibrationWarning() {
-            return this.isDualOrStaticRecalibration;
+            return this.requiresInshopRecalibration;
         },
         displayServiceableInshopOnly() {
             return (
@@ -293,6 +296,9 @@ export default {
         isDropoff() {
             return this.selectedAppointmentType === "Dropoff";
         },
+        isMobile() {
+            return this.selectedAppointmentType === "Mobile";
+        },
     },
     methods: {
         arePagePrerequisitesValid() {
@@ -302,7 +308,7 @@ export default {
                 store.getters.payment.isInsurance !== null
             );
         },
-        setData(zipCodeData, serviceabilityDetails, mobileFeePart) {
+        setData(zipCodeData, serviceabilityDetails, mobileFeePart, shopQuestionInitialData) {
             if (zipCodeData) {
                 this.zipContainsMilitaryBase = zipCodeData.containsMilitaryBase;
             }
@@ -314,6 +320,10 @@ export default {
             if (mobileFeePart) {
                 this.mobileFeePart = mobileFeePart;
             }
+
+            if (shopQuestionInitialData) {
+                this.shopQuestionInitialData = shopQuestionInitialData;
+            }
         },
         setContainsMilitaryBase(val) {
             if (this.zipContainsMilitaryBase !== val) {

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

@@ -9,17 +9,19 @@
                 alertClass="alert-info"
                 v-bind:isDismissible="false" />
             <buttonQuestion
+                ref="buttonQuestion"
                 buttonTypeString="shopListButton"
                 :buttonTypeObject="shopListButton"
                 class="radioQuestion"
                 :questionText="questionText"
                 :answers="answers"
-                groupName="ChooseShop"
+                groupName="chooseShop"
                 textPosition="text-start"
                 v-model="selectedValue"
                 isRequired
-                validationRules="option-required"/>
+                validationRules="option-required" />
-            <textLink v-if="displaySeeMoreLocationsLink"
+            <textLink
+                v-if="displaySeeMoreLocationsLink"
                 ref="showMoreShopsLink"
                 class="show-more-shops-link"
                 id="showMoreShopsId"
@@ -60,7 +62,7 @@ export default {
             availability: "high",
             answers: [],
             shopIndex: 0,
-            displaySeeMoreLocationsLink: true,
+            displaySeeMoreLocationsLink: false,
         };
     },
     props: {
@@ -69,6 +71,10 @@ export default {
         serviceZipCode: String,
         selectedAppointmentType: String,
         cmsWidgetName: String,
+        shopQuestionInitialData: {
+            type: Object,
+            required: true,
+        },
         validationRules: String,
     },
     components: {
@@ -101,10 +107,6 @@ export default {
                 serviceZipCode: this.serviceZipCode,
             });
         },
-        initializeComponent(initialData) {
-            this.shops = initialData;
-            this.getNextShopsFromList();
-        },
         async updateShopList() {
             const result = await this.dispatchStoreAction(storeActions.GET_PROVIDER_LOCATIONS, {
                 serviceZipCode: this.serviceZipCode,
@@ -171,7 +173,14 @@ export default {
             },
         },
         selectedAppointmentType: {
-            async handler() {
+            async handler(newValue, oldValue) {
+                if (oldValue == undefined) {
+                    this.shops = this.shopQuestionInitialData;
+                    this.getNextShopsFromList();
+                    this.displaySeeMoreLocationsLink = true;
+                    return;
+                }
+
                 await this.$nextTick();
 
                 const container = document.getElementsByClassName(
@@ -180,7 +189,13 @@ export default {
                 container.scrollTo({ top: container.scrollHeight, left: 0, behavior: "smooth" });
 
                 this.resetShopList();
+
+                this.selectedValue = "";
+
+                this.$refs.buttonQuestion.resetField();
+
             },
+            immediate: true,
         },
     },
 };