Additional refactoring per tech review

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

@@ -46,6 +46,18 @@ export async function getServiceabilityDetails(serviceZipCode, lineItems, pageNa
     return Promise.resolve(serviceabilityDetails);
 }
 
+export async function getShopProviderData(serviceZipCode) {
+    const shopProviderData = await baseMixin.methods.dispatchStoreActionWithLogging(
+        storeActions.GET_PROVIDERS,
+        {
+            serviceZipCode: serviceZipCode,
+        },
+        "service-location"
+    );
+
+    return Promise.resolve(shopProviderData);
+}
+
 export async function getAvailabilityRating(
     startDate,
     endDate,

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

@@ -145,9 +145,6 @@ export default {
         alertInvalidZipWidgetName: String,
         customComponentId: String,
         validationRules: String,
-        onZipUpdateCallback: {
-            type: Function,
-        },
     },
     computed: {
         mobileLocationLinkPromptText() {
@@ -256,10 +253,7 @@ export default {
                     this.$emit("updated-serviceability", serviceabilityDetails.data);
                     this.$emit("updated-contains-military-base", zipCodeData.containsMilitaryBase);
 
-                    if (this.onZipUpdateCallback) {
+                    // update the page level model
-                        await this.onZipUpdateCallback(serviceZipCode);
-                    }
-                    // Update the page level model
                     this.$emit("update:modelValue", this.internalModel);
 
                     this.closeModal();

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

@@ -20,7 +20,7 @@
                         @updated-contains-military-base="setContainsMilitaryBase"
                         linkWidgetName="ServiceZipLinkWidget"
                         modalWidgetName="ServiceZipModalWidget"
-                        :onZipUpdateCallback="reloadShopData" />
+                     />
 
                     <alert
                         ref="alertMilitaryBaseZip"
@@ -87,15 +87,15 @@
                         ref="mobileLocationQuestions"
                         linkWidgetName="MobileLocationLinkWidget"
                         modalWidgetName="MobileLocationModalWidget"
-                        :onZipUpdateCallback="reloadShopData" />
+                    />
 
                     <shopQuestion
                         ref="shopQuestion"
                         v-show="isShopQuestionDisplayed"
                         v-model="selectedProvider"
                         :selectedAppointmentType="selectedAppointmentType"
+                        :shopProviderData="shopProviderData"
                         :isDisplayed="isShopQuestionDisplayed"
-                        @updated-shop-list="setUpdatedShopList"
                         cmsWidgetName="ShopQuestionWidget" />
 
                     <contentGroupModal ref="RecalModal" cmsWidgetName="RecalModal" />
@@ -135,6 +135,7 @@ import { settleAllPromises } from "@/helpers/layout-helper";
 import {
     getPricedMobileFeePart,
     getServiceabilityDetails,
+    getShopProviderData,
 } from "@/layouts/service-location/helpers/service-location-helper/service-location-helper";
 
 import { Provider } from "@/layouts/service-location/classes/provider";
@@ -180,7 +181,7 @@ export default {
             mobileFeePart: null,
             zipContainsMilitaryBase: false,
             zipCodeCtu: null,
-            providerData: null,
+            shopProviderData: null,
         };
     },
     async beforeRouteEnter(to, from, next) {
@@ -188,7 +189,7 @@ export default {
         const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
 
         const serviceZipCode = store.getters.order.serviceLocation.zipCode;
-        const getZipCodeData = baseMixin.methods.getZipCodeData(serviceZipCode, "service-location");
+        const zipCodeDataPromise = baseMixin.methods.getZipCodeData(serviceZipCode, "service-location");
 
         const serviceabilityDetailsPromise = getServiceabilityDetails(
             serviceZipCode,
@@ -198,7 +199,7 @@ export default {
 
         const mobileFeePartPromise = getPricedMobileFeePart(serviceZipCode, "service-location");
 
-        const shopQuestionInitialDataPromise = shopQuestion.methods.loadInitialData(serviceZipCode);
+        const shopProviderDataPromise = getShopProviderData(serviceZipCode); // shopQuestion.methods.loadInitialData(serviceZipCode);
 
         // Settle promises and get results
         const promiseResultMap = [
@@ -206,6 +207,10 @@ export default {
                 resultKey: "cmsContent",
                 promise: cmsContentPromise,
             },
+            {
+                resultKey: "zipCodeData",
+                promise: zipCodeDataPromise,
+            },
             {
                 resultKey: "mobileFeePart",
                 promise: mobileFeePartPromise,
@@ -215,12 +220,8 @@ export default {
                 promise: serviceabilityDetailsPromise,
             },
             {
-                resultKey: "zipCodeData",
+                resultKey: "shopProviderData",
-                promise: getZipCodeData,
+                promise: shopProviderDataPromise,
-            },
-            {
-                resultKey: "shopQuestionInitialData",
-                promise: shopQuestionInitialDataPromise,
             },
         ];
 
@@ -232,14 +233,9 @@ export default {
             vm.setData(
                 resultMap.zipCodeData,
                 resultMap.serviceabilityDetails,
-                resultMap.mobileFeePart
+                resultMap.mobileFeePart,
+                resultMap.shopProviderData
             );
-
-            // Initialize the Shop Question component
-            vm.$refs.shopQuestion.initializeComponent(resultMap.shopQuestionInitialData);
-
-            // Initialize the page level shop data
-            vm.providerData = resultMap.shopQuestionInitialData;
         });
     },
     computed: {
@@ -254,7 +250,7 @@ export default {
                 if (newValue.zipCode !== this.zipCode) {
                     this.resetMobileLocation();
                     this.selectedAppointmentType = null;
-                    this.selectedProvider = null;
+                    this.selectedProvider = new Provider();
                 }
 
                 this.state = newValue.state;
@@ -277,20 +273,14 @@ export default {
                 };
             },
             set: function (newValue) {
-                this.streetAddress = newValue.addressQuestions.streetAddress;
+                if (newValue.addressQuestions.zipCode !== this.zipCode) {
-                this.apartmentNumberOrBusinessName =
+                    getShopProviderData(newValue.addressQuestions.zipCode).then((result) => {
-                    newValue.addressQuestions.apartmentNumberOrBusinessName;
+                        this.shopProviderData = result.data;
-                this.city = newValue.addressQuestions.city;
+                        this.selectedProvider = new Provider(this.shopProviderData.mobileProviderNumber);
-                this.state = newValue.addressQuestions.state;
+                    });                    
-                this.zipCode = newValue.addressQuestions.zipCode;
+                }
-                this.isVehicleProtected = newValue.isVehicleProtected;
 
-                if (newValue.zipCode !== this.zipCode) {
+                this.setMobileLocation(newValue);
-                    if (!this.selectedAppointmentType == "Mobile") {
-                        this.selectedAppointmentType = null;
-                    }
-                    this.selectedProvider = null;
-                }
             },
         },
         isServiceableMobile() {
@@ -355,7 +345,7 @@ export default {
                 store.getters.payment.isInsurance !== null
             );
         },
-        setData(zipCodeData, serviceabilityDetails, mobileFeePart) {
+        setData(zipCodeData, serviceabilityDetails, mobileFeePart, shopProviderData) {
             if (zipCodeData) {
                 this.zipContainsMilitaryBase = zipCodeData.containsMilitaryBase;
                 this.zipCodeCtu = zipCodeData.zipCodeCtu;
@@ -368,6 +358,10 @@ export default {
             if (mobileFeePart) {
                 this.mobileFeePart = mobileFeePart;
             }
+
+            if (shopProviderData) {
+                this.shopProviderData = shopProviderData;
+            }
         },
         setContainsMilitaryBase(val) {
             if (this.zipContainsMilitaryBase !== val) {
@@ -416,12 +410,18 @@ export default {
             this.isRecalibrationServiceableMobile =
                 serviceabilityDetails.isRecalibrationServiceableMobile;
         },
+        setMobileLocation(mobileLocation) {
+            this.streetAddress = mobileLocation.addressQuestions.streetAddress;
+            this.apartmentNumberOrBusinessName =
+                mobileLocation.addressQuestions.apartmentNumberOrBusinessName;
+            this.city = mobileLocation.addressQuestions.city;
+            this.state = mobileLocation.addressQuestions.state;
+            this.zipCode = mobileLocation.addressQuestions.zipCode;
+            this.isVehicleProtected = mobileLocation.isVehicleProtected;
+        },
         async reloadShopData(zipCode) {
             await this.$refs.shopQuestion.reloadShopData(zipCode);
         },
-        setUpdatedShopList(providerData) {
-            this.providerData = providerData;
-        },
         openRecalibrationInformationModal() {
             this.recalibrationInformationModal.openModal();
         },
@@ -497,18 +497,12 @@ export default {
     },
     watch: {
         selectedAppointmentType: {
-            handler(newValue) {
+            async handler(newValue) {
                 if (newValue === "Mobile") {
-                    this.selectedProvider = new Provider(this.providerData.mobileProviderNumber);
+                    getShopProviderData(this.zipCode).then(async (result) => {
-                } else {
+                        this.shopProviderData = result.data;
-                    this.selectedProvider = new Provider();
+                        this.selectedProvider = new Provider(this.shopProviderData.mobileProviderNumber);
-                }
+                    }); 
-            },
-        },
-        providerData: {
-            handler(newValue) {
-                if (newValue === "Mobile") {
-                    this.selectedProvider = new Provider(this.providerData.mobileProviderNumber);
                 } else {
                     this.selectedProvider = new Provider();
                 }

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

@@ -68,9 +68,6 @@ export default {
         },
         linkWidgetName: String,
         modalWidgetName: String,
-        onZipUpdateCallback: {
-            type: Function,
-        },
     },
     computed: {
         serviceZipLinkText() {
@@ -164,13 +161,9 @@ export default {
                     this.$emit("updated-serviceability", serviceabilityDetails.data);
                     this.$emit("updated-contains-military-base", zipCodeData.containsMilitaryBase);
 
-                    // Update the page level model
+                    // 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-question.vue

@@ -63,7 +63,6 @@ export default {
     mixins: [baseMixin],
     data() {
         return {
-            shopProviders: [],
             shopListButton: shopListButton,
             answers: [],
             shopIndex: 0,
@@ -76,6 +75,7 @@ export default {
             default: () => null,
         },
         selectedAppointmentType: String,
+        shopProviderData: Array,
         cmsWidgetName: String,
         validationRules: String,
         isDisplayed: Boolean,
@@ -84,6 +84,9 @@ export default {
         questionText() {
             return this.getCmsContent(this.cmsWidgetName, "QuestionText");
         },
+        shopProviders() {
+            return this.shopProviderData?.shopProviders ?? [];
+        },
         selectedValue: {
             get: function () {
                 return this.modelValue;
@@ -124,22 +127,23 @@ export default {
         },
     },
     methods: {
-        loadInitialData(serviceZipCode) {
+        // loadInitialData(serviceZipCode) {
-            return this.loadData(serviceZipCode);
+        //     return this.loadData(serviceZipCode);
-        },
+        // },
-        loadData(serviceZipCode) {
+        // loadData(serviceZipCode) {
-            return baseMixin.methods.dispatchStoreActionWithLogging(
+        //     return getShopProviders(serviceZipCode);
-                storeActions.GET_PROVIDERS,
+        //     // return baseMixin.methods.dispatchStoreActionWithLogging(
-                {
+        //     //     storeActions.GET_PROVIDERS,
-                    serviceZipCode: serviceZipCode,
+        //     //     {
-                },
+        //     //         serviceZipCode: serviceZipCode,
-                "service-location"
+        //     //     },
-            );
+        //     //     "service-location"
-        },
+        //     // );
-        initializeComponent(shopQuestionInitialData) {
+        // },
-            this.shopProviders = shopQuestionInitialData.shopProviders;
+        // initializeComponent(shopQuestionInitialData) {
-            this.$emit("updated-shop-list", shopQuestionInitialData);
+        //     this.shopProviders = shopQuestionInitialData.shopProviders;
-        },
+        //     this.$emit("updated-shop-list", shopQuestionInitialData);
+        // },
         async getNextShopsFromList(numberToGet = 3) {
             const shopIterator = (array, n) => {
                 const l = array.length;
@@ -199,15 +203,6 @@ export default {
             this.answers = [];
             this.shopIndex = 0;
         },
-        async reloadShopData(serviceZipCode) {
-            const result = await this.loadData(serviceZipCode);
-            this.initializeComponent(result.data);
-
-            this.resetAnswers();
-
-            await nextTick();
-            await this.getNextShopsFromList();
-        },
         getSelectedProviderObject(providerNumber) {
             const provider =
                 this.shopProviders?.find((provider) => provider.providerNumber == providerNumber) ??
@@ -239,8 +234,6 @@ export default {
         shopProviders: {
             async handler(newValue) {
                 await nextTick();
-
-                if (this.selectedAppointmentType) {
                 const selectedShopIndex = this.getSelectedProviderIndex(
                     newValue,
                     this.selectedProviderNumber
@@ -252,7 +245,6 @@ export default {
                     await this.getNextShopsFromList();
                     await nextTick();
                 }
-                }
             },
         },
     },