CASH-845: several updates to get date picker working with schedule again

src/digital-components/date-picker/date-picker.vue

@@ -359,8 +359,8 @@ export default {
         },
     },
     methods: {
-        initializeComponent(initialData) {
+        async initializeComponent(initialData) {
-            this.setCalendarData(initialData);
+            await this.setCalendarData(initialData);
             this.$refs.timeSlotModalQuestion.initializeComponent();
         },
         fireDateSelectedEvent(event, date) {
@@ -555,6 +555,8 @@ export default {
                     endDateString: initialViewEndDate,
                     providerNumber: config.providerNumber,
                     zipCode: config.zipCode,
+                    includeMobileTimeSlots: config.includeMobileTimeSlots,
+                    includeInshopTimeSlots: config.includeInshopTimeSlots,
                 });
                 resolve(response);
             });
@@ -574,6 +576,11 @@ export default {
             });
         },
         async setCalendarData(config = {}) {
+            this.isLoading = true;
+            this.selectableDatesInshop = [];
+            this.selectableDatesMobile = [];
+            this.months = [];
+
             this.hideSomeDaysForInitialView = config.hideSomeDaysForInitialView;
             const hideSecondMonth = config.hideSecondMonth;
             const direction = config.calendarViewDirection;

src/layouts/schedule/schedule.vue

@@ -119,6 +119,8 @@
                 <div class="col-md-6 col-xl-4">
                     <locationAlerts cmsWidgetPrefix="LocationAlert-" ref="locationAlerts" />
                     <datePicker
+                        :currentZip="zipCode"
+                        :currentProviderNumber="selectedProvider?.providerNumber"
                         v-show="appointmentType"
                         customComponentId="dateQuestion"
                         selectableDatesSetting="custom"
@@ -382,7 +384,7 @@ export default {
     name: "schedule",
     data() {
         return {
-            selectedDate: this.getSelectedDate(),
+            selectedDate: this.getSelectedDateFromStore(),
             selectedTimeSlotInfo: this.getSelectedTimeSlotInfo(),
             mobilePremiumAppointmentFee: null,
             waitListRequested: null,
@@ -420,7 +422,6 @@ export default {
             billToAccountNumber: null,
             shopProviderData: null,
             navigatingForward: false,
-            isMobileAddressValid: true,
             shopListButton: shopListButton,
         };
     },
@@ -599,56 +600,7 @@ export default {
         });
     },
     async mounted() {
-        const datePickerInitialData = await datePicker.methods.loadInitialData({
+        await this.initializeDatePicker();
-            // setup config options for date-picker
-            selectableDatesSetting: "custom",
-            initialViewRowsToShow: NUMBER_OF_CALENDAR_ROWS_TO_SHOW_FOR_INITIAL_VIEW,
-            getSelectableDatesCallback: getScheduleApiResponse,
-            // preSelectedDate: preSelectedDate,
-            providerNumber: this.selectedProvider?.providerNumber,
-            zipCode: this.zipCode,
-            includeMobileTimeSlots: this.isServiceableMobile,
-            includeInshopTimeSlots: this.isServiceableInshop || this.isServiceableDropoff,
-        });
-        datePickerInitialData.pricingByDayBasePrice = this.pricingByDayBasePrice;
-        datePickerInitialData.pricingByDayUpcharge = this.pricingByDayUpcharge;
-        this.$refs.datePicker.initializeComponent(datePickerInitialData);
-        this.selectableDatesInshop =
-            datePickerInitialData.initialShopTimeSlotsResponse.inshopTimeSlotsData;
-        this.selectableDatesMobile =
-            datePickerInitialData.initialShopTimeSlotsResponse.mobileTimeSlotsData;
-
-        this.$nextTick(() => {
-            if (!this.selectedDate) {
-                // if no date is preselected on load, then select the first available
-                if (this.isMobileSelected) {
-                    this.selectedDate = returnFirstDate(this.selectableDatesMobile);
-                } else {
-                    this.selectedDate = returnFirstDate(this.selectableDatesInshop);
-                }
-
-                // if there is still no selected date, then load more and try again
-                if (!this.selectedDate) {
-                    setTimeout(() => {
-                        this.$refs.datePicker.showAnotherMonth().then((moreSelectableDates) => {
-                            // update global
-                            this.selectableDatesInshop.days =
-                                moreSelectableDates.inshopTimeSlotsData.days;
-                            this.selectableDatesMobile.days =
-                                moreSelectableDates.mobileTimeSlotsData.days;
-
-                            if (this.isMobileSelected) {
-                                this.selectedDate = returnFirstDate(this.selectableDatesMobile);
-                            } else {
-                                this.selectedDate = returnFirstDate(this.selectableDatesInshop);
-                            }
-
-                            this.setDisplayWaitList();
-                        });
-                    }, 50);
-                }
-            }
-        });
     },
     computed: {
         serviceZipCodeQuestion: {
@@ -792,7 +744,7 @@ export default {
             return store.getters.order.policy.isNoComp;
         },
         isForwardActionDisabled() {
-            return this.displayNoShopsAlert || !this.isMobileAddressValid;
+            return this.displayNoShopsAlert;
         },
         additionalButtonData() {
             return {
@@ -1147,17 +1099,15 @@ export default {
         onShopSelected(shopQuestionPopUpData) {
             this.shopProviderData = shopQuestionPopUpData.shopProviderData;
             this.setServiceabilityDetails(shopQuestionPopUpData.serviceabilityDetails);
-            this.selectedProvider = this.shopProviderData.shopProviders.find((shopProvider) => {
+            const selectedProvider = this.shopProviderData.shopProviders.find((shopProvider) => {
                 return shopProvider.providerNumber === shopQuestionPopUpData.selectedProviderNumber;
             });
 
             // No zipCodeData comes back if zip was not changed
             if (shopQuestionPopUpData.zipCodeData) {
-                this.zipCode = shopQuestionPopUpData.zipCodeData.zipCode;
+                this.updateSelectedProviderAndZipCode(shopQuestionPopUpData.zipCodeData, selectedProvider);
-                this.state = shopQuestionPopUpData.zipCodeData.state;
+            } else {
-                this.zipCodeCtu = shopQuestionPopUpData.zipCodeData.zipCodeCtu;
+                this.updateSelectedProvider(selectedProvider);
-                this.zipContainsMilitaryBase =
-                    shopQuestionPopUpData.zipCodeData.containsMilitaryBase;
             }
         },
         async getMoreScheduleData(startDate, endDate) {
@@ -1181,11 +1131,61 @@ export default {
 
             return moreShopTimeSlots;
         },
+
+        async initializeDatePicker() {
+            this.selectedDate = null;
+
+            const datePickerInitialData = await this.$refs.datePicker.loadInitialData({
+                // setup config options for date-picker
+                selectableDatesSetting: "custom",
+                initialViewRowsToShow: NUMBER_OF_CALENDAR_ROWS_TO_SHOW_FOR_INITIAL_VIEW,
+                getSelectableDatesCallback: getScheduleApiResponse,
+                // preSelectedDate: preSelectedDate,
+                providerNumber: this.selectedProvider?.providerNumber,
+                zipCode: this.zipCode,
+                includeMobileTimeSlots: this.isServiceableMobile,
+                includeInshopTimeSlots: this.isServiceableInshop || this.isServiceableDropoff,
+            });
+            datePickerInitialData.pricingByDayBasePrice = this.pricingByDayBasePrice;
+            datePickerInitialData.pricingByDayUpcharge = this.pricingByDayUpcharge;
+            this.$refs.datePicker.initializeComponent(datePickerInitialData);
+            this.selectableDatesInshop =
+                datePickerInitialData.initialShopTimeSlotsResponse.inshopTimeSlotsData;
+            this.selectableDatesMobile =
+                datePickerInitialData.initialShopTimeSlotsResponse.mobileTimeSlotsData;            
+
+            // TODO - CHECK FOR A PRESELECTED DATE!!! DON'T NEED TO DO THE BELOW IF THERE'S A PRESELECTED...?
+
+            if (!this.selectedDate) {
+                // if no date is preselected on load, then select the first available
+                const selectedDateMobile = this.getSelectedDateForMobile();
+                const selectedDateInshop = this.getSelectedDateForInshop();
+
+                // if there is still no selected date, then load more and try again
+                if ((this.isServiceableMobile && !selectedDateMobile) || (this.isServiceableInshop && !selectedDateInshop) || (this.isServiceableDropoff && !selectedDateInshop)) {
+                    setTimeout(() => {
+                        this.$refs.datePicker.showAnotherMonth().then((moreSelectableDates) => {
+                            // update all dates
+                            this.selectableDatesInshop.days =
+                                moreSelectableDates.inshopTimeSlotsData.days;
+                            this.selectableDatesMobile.days =
+                                moreSelectableDates.mobileTimeSlotsData.days;
+                            this.setDisplayWaitList();
+                        });
+                    }, 50);
+                }
+                if (this.isMobileSelected) {
+                    this.selectedDate = selectedDateMobile;
+                } else {
+                    this.selectedDate = selectedDateInshop;
+                }
+            }
+        },
         getScheduleApiResponse,
         getServiceZipCtuCodeFromStore() {
             return store.getters.order.serviceLocation.zipCodeCtu;
         },
-        getSelectedDate() {
+        getSelectedDateFromStore() {
             let isMobileSelected = this.isMobileSelected;
             if (isMobileSelected === undefined) {
                 isMobileSelected = this.appointmentType === AppointmentTypeStrings.MOBILE;
@@ -1539,9 +1539,34 @@ export default {
                 ? AppointmentTypeStrings.DROP_OFF
                 : AppointmentTypeStrings.IN_SHOP;
         },
-        updateSelectedProvider(oldProvider, newProvider) {
+        getSelectedDate() {
+            let dateToSelect;
+            if (this.isMobileSelected) {
+                dateToSelect = returnFirstDate(this.selectableDatesMobile);
+            } else {
+                dateToSelect = returnFirstDate(this.selectableDatesInshop);
+            }
+            if (!dateToSelect) return null;
+            return this.isMobileSelected ? dateToSelect + "-mobile" : dateToSelect;
+        },
+        getSelectedDateForMobile() {
+            let dateToSelect = returnFirstDate(this.selectableDatesMobile);
+            if (!dateToSelect) return null;
+            return dateToSelect + "-mobile";
+        },
+        getSelectedDateForInshop() {
+            let dateToSelect = returnFirstDate(this.selectableDatesInshop);
+            if (!dateToSelect) return null;
+            return dateToSelect;
+        },
+        resetSelectedProvider() {
+            this.selectedProvider = new Provider();
+            this.updateSelectedProvider();
+        },
+        updateSelectedProvider(newProvider) {
             if (newProvider) {
                 this.selectedProvider = newProvider;
+                this.initializeDatePicker();
             } else if (
                 // use closest shopProvider if none exists
                 !this.selectedProvider?.address?.streetAddress &&
@@ -1552,27 +1577,39 @@ export default {
         },
         handleZipCodeChange(newZipCode) {
             this.resetMobileLocation();
-            this.selectedProvider = new Provider();
+            this.appointmentTypeFromAppointmentTypeQuestion = null;
-            getShopProviderData(newZipCode.zipCode).then(async (result) => {
+            
+            getShopProviderData(newZipCode.zipCode).then((result) => {
                 this.shopProviderData = result.data;
-                if (this.appointmentType === AppointmentTypeStrings.MOBILE) {
+                this.resetSelectedProvider();
-                    this.updateSelectedProvider(
+                this.state = newZipCode.state;
-                        this.selectedProvider,
+                this.zipCode = newZipCode.zipCode;
-                        new Provider(this.shopProviderData.mobileProviderNumber)
+                this.zipCodeCtu = newZipCode.zipCodeCtu;
-                    );
+                this.zipContainsMilitaryBase = newZipCode.containsMilitaryBase;
-                } else {
+                this.selectedDate = null;
-                    this.isMobileAddressValid = true;
+                this.initializeDatePicker();
-                    this.updateSelectedProvider();
-                }
             });
-            this.state = newZipCode.state;
+        },
-            this.zipCode = newZipCode.zipCode;
+        updateSelectedProviderAndZipCode(newZipCode, newProvider) {
-            this.zipCodeCtu = newZipCode.zipCodeCtu;
+            this.resetMobileLocation();
+            
+            getShopProviderData(newZipCode.zipCode).then((result) => {
+                this.shopProviderData = result.data;
+                this.state = newZipCode.state;
+                this.zipCode = newZipCode.zipCode;
+                this.zipCodeCtu = newZipCode.zipCodeCtu;
+                this.zipContainsMilitaryBase = newZipCode.containsMilitaryBase;
+                this.selectedDate = null;
+                this.selectedProvider = newProvider;
+                this.initializeDatePicker();
+            });
+            
         },
         handleAppointmentTypeChange(newAppointmentType) {
+            this.updateFooterButtonText();
             if (newAppointmentType === AppointmentTypeStrings.MOBILE) {
                 this.appointmentType = AppointmentTypeStrings.MOBILE;
-            } else {
+            } else if (newAppointmentType) {
                 if (this.selectedTimeSlotInfo?.timeSlot?.routeCode) {
                     // update appointmentType based on routeCode to determine if it should be dropoff or inshop
                     this.appointmentType = this.getInShopOrDropOffApptType(
@@ -1584,7 +1621,10 @@ export default {
 
                 // make sure a selectedProvider exists
                 this.updateSelectedProvider();
+            } else {
+                this.appointmentType = null;
             }
+            this.selectedDate = this.getSelectedDate();
         },
     },
     watch: {