Merge pull request #2951 from Safelite/feature/CASH-1873

CASH-1873: Show Mobile First modal on page load

src/layouts/schedule/mobile-first-modal/mobile-first-modal.vue

@@ -76,6 +76,7 @@ export default {
             let selectedTimeSlot = {
                 timeSlot: this.selectedAppontment.timeSlot,
                 routeCode: this.selectedAppontment.timeSlot.id,
+                date: this.selectedAppontment.date,
             };
             this.$emit("confirm-appointment", selectedTimeSlot);
             this.modal.closeModal();

src/layouts/schedule/schedule.vue

@@ -469,6 +469,7 @@ export default {
             navigatingForward: false,
             shopListButton: shopListButton,
             lastSelectedInshopOrDropoffProvider: null,
+            selectedMobileFirstAppointment: false,
         };
     },
     async beforeRouteEnter(to, from, next) {
@@ -597,7 +598,9 @@ export default {
                 pricedMobileFeePart,
                 shopProviderData.data
             );
-            vm.initializeDatePicker();
+            vm.initializeDatePicker().then(() => {
+                vm.showMobileFirstModal();
+            });
         });
     },
     computed: {
@@ -858,7 +861,9 @@ export default {
             );
         },
         isMobileFirstModalOpen() {
-            return this.isMobileSelected ? this.$refs.mobileFirstModal?.getIsModalOpen() : false;
+            return this.selectableDatesMobile.days
+                ? this.$refs.mobileFirstModal?.getIsModalOpen()
+                : false;
         },
     },
     methods: {
@@ -1187,8 +1192,6 @@ export default {
                 moreShopTimeSlots.mobileTimeSlotsData.days
             );
 
-            this.showMobileFirstModal();
-
             return moreShopTimeSlots;
         },
 
@@ -1678,7 +1681,9 @@ export default {
                 this.zipCode = newZipCode.zipCode;
                 this.zipCodeCtu = newZipCode.zipCodeCtu;
                 this.selectedDate = null;
-                this.initializeDatePicker();
+                this.initializeDatePicker().then(() => {
+                    this.showMobileFirstModal();
+                });
             });
         },
         updateSelectedProviderAndZipCode(newZipCode, newProvider) {
@@ -1716,7 +1721,6 @@ export default {
                 }
                 this.appointmentType = AppointmentTypeStrings.MOBILE;
                 this.updateSelectedProvider();
-                this.showMobileFirstModal();
             } else if (newAppointmentType) {
                 if (this.appointmentType != AppointmentTypeStrings.MOBILE) {
                     // Clear last shop selected if appointment type was changed in any manner other than from Mobile
@@ -1742,7 +1746,7 @@ export default {
             this.selectedDate = this.getFirstAvailableDate();
         },
         async showMobileFirstModal() {
-            if (this.appointmentType == AppointmentTypeStrings.MOBILE) {
+            if (!this.selectedRouteCodeData?.routeCode) {
                 const isShowMobileFirstAppt = experimentMixin.methods.hasSettingEqualTo(
                     experimentSettings.SHOW_MOBILE_FIRST_APPT,
                     "true"
@@ -1824,9 +1828,6 @@ export default {
             }
         },
         async getFirstAvailableMobileApptByTOD(timeOfDay) {
-            if (!this.selectableDatesMobile.days) {
-                await this.initializeDatePicker();
-            }
             if (!this.selectableDatesMobile?.days?.length) {
                 return null;
             } else {
@@ -1853,6 +1854,10 @@ export default {
             }
         },
         updateTimeSlotandNavigateForward(timeSlotObj) {
+            this.selectedMobileFirstAppointment = true;
+            this.appointmentType = AppointmentTypeStrings.MOBILE;
+            this.selectedDate = timeSlotObj.date;
+            this.updateSelectedProvider();
             this.updateTimeSlot(timeSlotObj);
             this.forwardButtonAction();
         },
@@ -1872,7 +1877,7 @@ export default {
             const hasValueChanged = newValue !== oldValue;
             const isDateDifferent = (newValue || oldValue) !== selectedDate;
 
-            if (hasValueChanged && isDateDifferent) {
+            if (hasValueChanged && isDateDifferent && !this.selectedMobileFirstAppointment) {
                 this.selectedTimeSlotInfo = {
                     timeSlot: {
                         date: null,

src/styles/ux-variables.scss

@@ -123,8 +123,8 @@ $body-color: $gray-600;
 
 //Fonts
 $font-family-sans-serif: UrbanistRegular, Arial, Helvetica, sans-serif;
-$font-family-monospace: UrbanistRegular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
-    monospace;
+$font-family-monospace:
+    UrbanistRegular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 // stylelint-enable value-keyword-case
 $font-family-base: $font-family-sans-serif;
 $font-family-code: $font-family-monospace;