Mobile provider number setting on service-location page

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

@@ -1,5 +1,4 @@
 import { storeActions } from "@/constants/store-actions";
-import store from "@/store";
 import baseMixin from "@/mixins/base-mixin.js";
 
 export async function getPricedMobileFeePart(serviceZipCode) {
@@ -72,17 +71,25 @@ export async function getAvailabilityRating(
     return Promise.resolve(shopStatus);
 }
 
-// export function getMobileProvider(mobileProviderNumber) {
+export class Provider {
-//     const provider = {
+    constructor(providerNumber = null, address = null) {
-//         providerNumber: mobileProviderNumber,
+        this.providerNumber = providerNumber;
-//         address: {
+        this.address = address ?? new ProviderAddress();
-//             streetAddress1: null,
+    }
-//             streetAddress2: null,
+}
-//             city: null,
+
-//             state: null,
+export class ProviderAddress {
-//             zipCode: null,
+    constructor(
-//             zipCodeCtu: null,
+        streetAddress = null,
-//         },
+        city = null,
-//     };
+        state = null,
-//     return provider;
+        zipCode = null,
-// }
+        zipCodeCtu = null
+    ) {
+        this.streetAddress = streetAddress;
+        this.city = city;
+        this.state = state;
+        this.zipCode = zipCode;
+        this.zipCodeCtu = zipCodeCtu;
+    }
+}

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

@@ -110,6 +110,7 @@ import { settleAllPromises } from "@/helpers/layout-helper";
 import {
     getPricedMobileFeePart,
     getServiceabilityDetails,
+    Provider,
 } from "@/layouts/service-location/helpers/service-location-helper/service-location-helper";
 import store from "@/store";
 
@@ -150,7 +151,7 @@ export default {
             mobileFeePart: null,
             zipContainsMilitaryBase: false,
             zipCodeCtu: null,
-            providerData: [],
+            providerData: null,
         };
     },
     async beforeRouteEnter(to, from, next) {
@@ -200,7 +201,12 @@ export default {
                 resultMap.serviceabilityDetails,
                 resultMap.mobileFeePart
             );
+
+            // Initialize the Shop Question component
             vm.$refs.shopQuestion.initializeComponent(resultMap.shopQuestionInitialData);
+
+            // Initialize the page level shop data
+            vm.providerData = resultMap.shopQuestionInitialData;
         });
     },
     computed: {
@@ -422,18 +428,19 @@ export default {
         selectedAppointmentType: {
             handler(newValue) {
                 if (newValue === "Mobile") {
-                    this.selectedProvider = this.defaultProvider;
+                    this.selectedProvider = new Provider(this.providerData.mobileProviderNumber);
-                    this.selectedProvider.providerNumber = this.providerData.mobileProviderNumber;
+                } else {
+                    this.selectedProvider = new Provider();
                 }
             },
-            providerData: {
+        },
-                handler(newValue) {
+        providerData: {
-                    if (newValue === "Mobile") {
+            handler(newValue) {
-                        this.selectedProvider = this.defaultProvider;
+                if (newValue === "Mobile") {
-                        this.selectedProvider.providerNumber =
+                    this.selectedProvider = new Provider(this.providerData.mobileProviderNumber);
-                            this.providerData.mobileProviderNumber;
+                } else {
-                    }
+                    this.selectedProvider = new Provider();
-                },
+                }
             },
         },
     },

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

@@ -52,7 +52,7 @@ import { errorMessages } from "@/constants/error-messages";
 import baseMixin from "@/mixins/base-mixin.js";
 import { nextTick } from "vue";
 
-import { getAvailabilityRating } from "@/layouts/service-location/helpers/service-location-helper/service-location-helper";
+import { getAvailabilityRating, Provider } from "@/layouts/service-location/helpers/service-location-helper/service-location-helper";
 
 defineRule("option-required", required(errorMessages.OPTION_REQUIRED));
 
@@ -95,10 +95,9 @@ export default {
                 return this.selectedValue?.providerNumber;
             },
             set: function (newValue) {
-                console.log(`set: ${newValue}`);
                 // Button Question only supports Number, or String data types so we must get the full object to emit
                 this.selectedValue =
-                    this.getSelectedProviderObject(newValue) ?? this.defaultProvider;
+                    this.getSelectedProviderObject(newValue);
             },
         },
         displayDropoffInformation() {
@@ -198,28 +197,15 @@ export default {
         async reloadShopData(serviceZipCode) {
             const result = await this.loadData(serviceZipCode);
             this.initializeComponent(result.data);
-            console.log("reloadShopData");
+
             this.resetAnswers();
 
             await nextTick();
             await this.getNextShopsFromList();
         },
         getSelectedProviderObject(providerNumber) {
-            const defaultProvider = {
-                providerNumber: null,
-                address: {
-                    streetAddress1: null,
-                    streetAddress2: null,
-                    city: null,
-                    state: null,
-                    zipCode: null,
-                    zipCodeCtu: null,
-                },
-            };
-
             const provider =
-                this.shopProviders?.find((provider) => provider.providerNumber == providerNumber) ??
+                this.shopProviders?.find((provider) => provider.providerNumber == providerNumber) ?? new Provider();
-                defaultProvider;
 
             return provider;
         },
@@ -233,20 +219,15 @@ export default {
     },
     watch: {
         selectedAppointmentType: {
-            async handler(newValue) {
+            // Question: Does it matter if this fires when clicking Mobile? Ideally it should not, but it doesn't seem to effect anything
+            //           What we DON'T want to do here is create a dependency by checking if the selectedAppointmentType is Mobile as that has
+            //           nothing to do with this component. We could mitigate this by showing / hiding this component with v-if but that messes
+            //           up the component initialization on page load.
+            async handler() {
                 this.resetAnswers();
 
                 await nextTick();
-
+                this.getNextShopsFromList();
-                if (newValue !== "Mobile") {
-                    this.selectedProviderNumber = -1;
-                }
-
-                await nextTick();
-
-                if (newValue !== "Mobile") {
-                    this.getNextShopsFromList();
-                }
             },
         },
         shopProviders: {