Added separate emit for the full provider object when a button is clicked

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

@@ -71,7 +71,8 @@
                 <shopQuestion
                     ref="shopQuestion"
                     v-show="isShopQuestionDisplayed"
-                    v-model="selectedProvider"
+                    v-model="selectedProviderNumber"
+                    @providerSelected="onProviderSelected"
                     :serviceZipCode="zipCode"
                     :selectedAppointmentType="selectedAppointmentType"
                     :isDisplayed="isShopQuestionDisplayed"
@@ -133,6 +134,14 @@ defineRule("mobile-location-required", (value) => {
     return true;
 });
 
+const defaultProvider = {
+    providerNumber: null,
+    address: null,
+    city: null,
+    state: null,
+    zip: null,
+};
+
 export default {
     name: "service-location",
     data() {
@@ -148,7 +157,8 @@ export default {
             isGlassServiceableMobile: null,
             isRecalibrationServiceableMobile: null,
             selectedAppointmentType: null,
-            selectedProvider: null,
+            selectedProvider: this.getSelectedProvider(),
+            selectedProviderNumber: this.getSelectedProvider().providerNumber,
             mobileFeePart: null,
             zipContainsMilitaryBase: false,
         };
@@ -215,7 +225,7 @@ export default {
                 if (newValue.zipCode !== this.zipCode) {
                     this.resetMobileLocation();
                     this.selectedAppointmentType = null;
-                    this.selectedProvider = null;
+                    this.selectedProvider = defaultProvider;
                 }
 
                 this.state = newValue.state;
@@ -250,7 +260,7 @@ export default {
                     if (!this.selectedAppointmentType == "Mobile") {
                         this.selectedAppointmentType = null;
                     }
-                    this.selectedProvider = null;
+                    this.selectedProvider = defaultProvider;
                 }
             },
         },
@@ -340,6 +350,9 @@ export default {
         getServiceZipCodeFromStore() {
             return store.getters.order.serviceLocation.zipCode;
         },
+        getSelectedProvider() {
+            return store.getters.order.serviceLocation.provider ?? defaultProvider;
+        },
         setMobileFeePart(mobileFeePart) {
             this.mobileFeePart = mobileFeePart;
         },
@@ -373,6 +386,16 @@ export default {
         async reloadShopData() {
             await this.$refs.shopQuestion.reloadShopData(this.zipCode);
         },
+        onProviderSelected(selectedProvider) {
+            this.selectedProvider = selectedProvider;
+        },
+    },
+    watch: {
+        selectedProvider: {
+            handler(newValue) {
+                console.log(newValue);
+            },
+        },
     },
     components: {
         alert,

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

@@ -157,17 +157,7 @@ describe("shop-question.vue", () => {
         const { wrapper } = setupMocks({
             mixins: [mockMixin],
             props: {
-                modelValue: {
+                modelValue: null,
-                    address: {
-                        city: "POWELL",
-                        country: "US",
-                        state: "OH",
-                        streetAddress: "3938 POWELL RD",
-                        zipCode: "43065",
-                    },
-                    distanceInMiles: 16.2690495685233,
-                    providerNumber: null,
-                },
                 serviceZipCode: "43081",
                 selectedAppointmentType: "Dropoff",
                 cmsWidgetName: cmsWidgetName,
@@ -437,10 +427,14 @@ describe("shop-question.vue", () => {
 
     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: "003341",
+                modelValue: selectedProvider.providerNumber,
                 serviceZipCode: "43081",
                 selectedAppointmentType: "Dropoff",
                 cmsWidgetName: cmsWidgetName,

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

@@ -89,7 +89,8 @@ export default {
                     (provider) => provider.providerNumber == newValue
                 );
 
-                this.$emit("update:modelValue", provider);
+                this.$emit("update:modelValue", newValue);
+                this.$emit("providerSelected", provider);
             },
         },
         displayDropoffInformation() {