Merge pull request #2660 from Safelite/feature/CASH-845-stage-6

Cash-845 - Fix apptType/providerNumber/zipCode conflicts and some refactoring on new Schedule page

src/layouts/schedule/schedule.vue

@@ -144,7 +144,7 @@
                     <navbar
                         cmsWidgetName="FunnelFooterWidget"
                         ref="navbar"
-                        :isForwardActionDisabled="!meta.valid"
+                        :isForwardActionDisabled="!meta.valid || isForwardActionDisabled"
                         @back-clicked="backButtonAction"
                         @ForwardClicked="forwardButtonAction" />
                 </div>
@@ -403,9 +403,9 @@ export default {
             isRecalibrationServiceableDropoff: null,
             isGlassServiceableMobile: null,
             isRecalibrationServiceableMobile: null,
-            appointmentType: this.getAppointmentType(),
+            appointmentType: this.getAppointmentTypeFromStore(),
-            appointmentTypeFromAppointmentTypeQuestion: this.getAppointmentType(),
+            appointmentTypeFromAppointmentTypeQuestion: this.getAppointmentTypeFromStore(),
-            selectedProvider: this.getSelectedProvider(),
+            selectedProvider: this.getSelectedProviderFromStore(),
             mobileFeePart: null,
             recycleFeePart: null,
             zipContainsMilitaryBase: false,
@@ -570,6 +570,7 @@ export default {
 
         const resultMap = await settleAllPromises(promiseResultMap);
 
+        // add pricing by day data
         const pricingByDayUpcharge =
             showPricingByDay && resultMap.pricingByDayUpchargePart
                 ? await baseMixin.methods.getTotalLineItemPrice(
@@ -655,17 +656,7 @@ export default {
                 };
             },
             set: function (newValue) {
-                if (newValue.zipCode !== this.zipCode) {
+                this.handleZipCodeChange(newValue);
-                    this.resetMobileLocation();
-                    this.appointmentType = null;
-                    this.selectedProvider = new Provider();
-                }
-
-                this.state = newValue.state;
-                this.zipCode = newValue.zipCode;
-                this.zipCodeCtu = newValue.zipCodeCtu;
-
-                this.$nextTick();
             },
         },
         isMobileSelected() {
@@ -812,7 +803,11 @@ export default {
                 });
             };
 
-            if (this.selectedProvider && this.selectedProvider.address) {
+            if (
+                this.selectedProvider &&
+                this.selectedProvider.address &&
+                this.selectedProvider?.providerNumber
+            ) {
                 const provider = this.shopProviderData?.shopProviders?.find(
                     (p) => p.providerNumber === this.selectedProvider?.providerNumber
                 );
@@ -964,13 +959,13 @@ export default {
 
             if (shopProviderData) {
                 this.shopProviderData = shopProviderData;
+                this.updateSelectedProvider(); // ensure that page loads with non-null selectedProvider
             }
 
             var gaLabel = this.GaLabels.NO;
             if (this.isServiceableMobile) {
                 gaLabel = this.GaLabels.YES;
             }
-
             this.pushEventToGA(
                 this.GaCategories.APPOINTMENT,
                 this.GaActions.MOBILE_AVAILABLE,
@@ -1019,10 +1014,10 @@ export default {
         getIsVehicleProtectedFromStore() {
             return store.getters.order.serviceLocation.isVehicleProtected;
         },
-        getAppointmentType() {
+        getAppointmentTypeFromStore() {
             return store.getters.order.serviceLocation.appointmentType;
         },
-        getSelectedProvider() {
+        getSelectedProviderFromStore() {
             return store.getters.order.serviceLocation.provider;
         },
         resetMobileLocation() {
@@ -1538,39 +1533,38 @@ export default {
                 ? AppointmentTypeStrings.DROP_OFF
                 : AppointmentTypeStrings.IN_SHOP;
         },
-    },
+        updateSelectedProvider(oldProvider, newProvider) {
-    watch: {
+            if (newProvider) {
-        zipCode: {
+                this.selectedProvider = newProvider;
-            handler(newValue) {
+            } else if (
-                if (!this.navigatingForward) {
+                // use closest shopProvider if none exists
-                    getShopProviderData(this.zipCode).then(async (result) => {
+                !this.selectedProvider?.address?.streetAddress &&
-                        this.shopProviderData = result.data;
+                this.shopProviderData?.shopProviders
-                        if (this.appointmentType === "Mobile") {
+            ) {
-                            this.selectedProvider = new Provider(
-                                this.shopProviderData.mobileProviderNumber
-                            );
-                        } else {
-                            this.isMobileAddressValid = true;
-                        }
-                    });
-                }
-            },
-        },
-        appointmentType: {
-            handler(newValue, oldValue) {
-                if (newValue === AppointmentTypeStrings.MOBILE) {
-                    this.selectedProvider = new Provider(
-                        this.shopProviderData.mobileProviderNumber
-                    );
-                    this.isMobileSelected = true;
-                } else {
                 this.selectedProvider = this.shopProviderData.shopProviders[0];
             }
         },
+        handleZipCodeChange(newZipCode) {
+            this.resetMobileLocation();
+            this.selectedProvider = new Provider();
+            getShopProviderData(newZipCode.zipCode).then(async (result) => {
+                this.shopProviderData = result.data;
+                if (this.appointmentType === AppointmentTypeStrings.MOBILE) {
+                    this.updateSelectedProvider(
+                        this.selectedProvider,
+                        new Provider(this.shopProviderData.mobileProviderNumber)
+                    );
+                } else {
+                    this.isMobileAddressValid = true;
+                    this.updateSelectedProvider();
+                }
+            });
+            this.state = newZipCode.state;
+            this.zipCode = newZipCode.zipCode;
+            this.zipCodeCtu = newZipCode.zipCodeCtu;
         },
-        appointmentTypeFromAppointmentTypeQuestion: {
+        handleAppointmentTypeChange(newAppointmentType) {
-            handler(newValue, oldValue) {
+            if (newAppointmentType === AppointmentTypeStrings.MOBILE) {
-                if (newValue === AppointmentTypeStrings.MOBILE) {
                 this.appointmentType = AppointmentTypeStrings.MOBILE;
             } else {
                 if (this.selectedTimeSlotInfo?.timeSlot?.routeCode) {
@@ -1581,10 +1575,18 @@ export default {
                 } else {
                     this.appointmentType = AppointmentTypeStrings.IN_SHOP_OR_DROP_OFF;
                 }
+
+                // make sure a selectedProvider exists
+                this.updateSelectedProvider();
             }
         },
     },
-
+    watch: {
+        appointmentTypeFromAppointmentTypeQuestion: {
+            handler(newValue, oldValue) {
+                this.handleAppointmentTypeChange(newValue);
+            },
+        },
         selectedDate(newValue, oldValue) {
             // Clear time slot selection if date selected changes
             if (newValue !== oldValue) {