Merge pull request #470 from Safelite/feature/richardson/SSR-675.3

add timeSlotModalQuestion to schedule

src/layouts/schedule-page/schedule-page.vue

@@ -29,7 +29,25 @@
                     class="text-link-small"
                     :customSelectableDatesCallback="getAvailableDatesMethod"
                     validationRules="date-required"
-                    @date-clicked="openInshopTimeSlotsModal" />
+                    @dateClicked="openInshopTimeSlotsModal" />
+                <timeSlotModalQuestion
+                    ref="timeSlotModalQuestion"
+                    v-model="selectedTimeSlotInfo"
+                    customComponentId="timeSlotModalQuestion"
+                    cmsWidgetName="TimeSlotModalQuestion"
+                    mobilePremiumCmsWidgetName="MobilePremiumTimeSlotModal"
+                    mobileCmsWidgetName="MobileTimeSlotModal"
+                    dropoffCmsWidgetName="DropOffTimeSlotModal"
+                    sameDayDropOffCmsWidgetName="SameDayDropOffTimeSlotModal"
+                    overnightDropOffCmsWidgetName="OvernightDropOffTimeSlotModal"
+                    :selectedDate="selectedDate"
+                    :appointmentType="appointmentType"
+                    :premiumAppointmentFee="mobilePremiumAppointmentFee"
+                    :timeSlotsForSelectedDate="timeSlotsForSelectedDate"
+                    :estimatedServiceMinutesMinimum="selectableDatesData.estimatedServiceMinutesMinimum"
+                    :estimatedServiceMinutesMaximum="selectableDatesData.estimatedServiceMinutesMaximum"
+                    validationRules="time-slot-selection-required"
+                    @timeSlotModalClosed="timeSlotModalClosed" />
                 <siteFooter
                     ref="navbar"
                     class="mt-5"
@@ -47,6 +65,7 @@ import siteHeader from '@/iss-components/site-header/site-header.vue';
 import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
 import locationAlerts from '@/layouts/schedule-page/location-alerts/location-alerts.vue';
 import datePicker from '@/digital-components/date-picker/date-picker.vue';
+import timeSlotModalQuestion from '@/layouts/schedule-page/time-slot-modal-question/time-slot-modal-question.vue';
 import siteFooter from '@/iss-components/site-footer/site-footer.vue';
 import textBlock from '@/digital-components/text-block/text-block.vue';
 
@@ -180,6 +199,7 @@ export default {
         siteSubHeader,
         locationAlerts,
         datePicker,
+        timeSlotModalQuestion,
         siteFooter,
         textBlock,
         // eslint-disable-next-line vue/no-reserved-component-names
@@ -238,7 +258,12 @@ export default {
         return { mainStore };
     },
     data() {
-
+        return {
+            selectedDate: this.getSelectedDate(),
+            selectedTimeSlotInfo: this.getSelectedTimeSlotInfo(),
+            selectableDatesData: [],
+            mobilePremiumAppointmentFee: null
+        };
     },
     computed: {
         ChangeShopLinkText() {
@@ -406,22 +431,14 @@ export default {
                     supportingItems.push(this.mobilePremiumAppointmentFee);
                 }
 
-                this.dispatchStoreAction(
+                this.mainStore.saveSupportingItemsSuppressingStateResetting(supportingItems);
-                    this.storeActions.SAVE_SUPPORTING_ITEMS_SUPPRESSING_STATE_RESETTING,
-                    supportingItems,
-                    false
-                );
             } else {
                 // if it's not a mobile and/or premium early bird, then make sure we remove any that may have been added
                 const removeEarlyBirdIndex = supportingItems.findIndex((item) => item.partType === PREMIUM_FEE_PART_TYPE);
 
                 if (removeEarlyBirdIndex >= 0) {
                     supportingItems.splice(removeEarlyBirdIndex, 1);
-                    this.dispatchStoreAction(
+                    this.mainStore.saveSupportingItemsSuppressingStateResetting(supportingItems);
-                        this.storeActions.SAVE_SUPPORTING_ITEMS_SUPPRESSING_STATE_RESETTING,
-                        supportingItems,
-                        false
-                    );
                 }
             }
         },
@@ -429,7 +446,9 @@ export default {
             this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
         },
         forwardButtonAction() {
-            // validate and save here
+            this.updateSupportingItems();
+            this.mainStore.saveSchedule(this.selectedTimeSlotInfo.timeSlot);
+
             this.$router.navigate(this.navigationScenarios.CLICKED_FORWARD, this.$route);
         }
     }

src/store/index.js

@@ -139,7 +139,8 @@ const getDefaultState = () => ({
             startTime: null,
             endTime: null,
             routeCode: null,
-            jobMaxMinutes: null
+            jobMaxMinutes: null,
+            jobMinMinutes: null
         },
         referralNumber: null,
         referralDate: null,
@@ -1005,7 +1006,8 @@ export const useMainStore = defineStore({
                         startTime: schedule.startTime,
                         endTime: schedule.endTime,
                         routeCode: schedule.routeCode,
-                        jobMaxMinutes: schedule.jobMaxMinutes
+                        jobMaxMinutes: schedule.jobMaxMinutes,
+                        jobMinMinutes: schedule.jobMinMinutes
                     },
                     referralDate: this.order.referralDate,
                     referralNumber: this.order.referralNumber?.toString(),
@@ -1199,7 +1201,7 @@ export const useMainStore = defineStore({
             this.order.schedule.endTime = null;
             this.order.schedule.routeCode = null;
             this.order.schedule.jobMaxMinutes = null;
-            // this.order.schedule.jobMinMinutes = null;
+            this.order.schedule.jobMinMinutes = null;
 
             // premium appointment fee used on schedule page also needs reset when schedule is reset
             const { supportingItems } = this.order.lineItems;
@@ -1404,6 +1406,10 @@ export const useMainStore = defineStore({
             this.order.lineItems.glassParts = glassParts;
         },
         saveSupportingItems(supportingItems) {
+            // TODO: RESET_SERVICE_LOCATION_STATE_AND_DEPENDENCIES
+            this.order.lineItems.supportingItems = supportingItems;
+        },
+        saveSupportingItemsSuppressingStateResetting(supportingItems) {
             this.order.lineItems.supportingItems = supportingItems;
         },
         saveVaps(vaps) {
@@ -1483,6 +1489,21 @@ export const useMainStore = defineStore({
             });
         },
 
+        // Schedule Actions
+        saveSchedule(scheduleInfo) {
+            this.updateSchedule(scheduleInfo);
+        },
+        updateSchedule(scheduleInfo) {
+            if (scheduleInfo) {
+                this.order.schedule.date = scheduleInfo.date;
+                this.order.schedule.startTime = scheduleInfo.startTime;
+                this.order.schedule.endTime = scheduleInfo.endTime;
+                this.order.schedule.routeCode = scheduleInfo.routeCode;
+                this.order.schedule.jobMaxMinutes = scheduleInfo.jobMaxMinutes;
+                this.order.schedule.jobMinMinutes = scheduleInfo.jobMinMinutes;
+            }
+        },
+
         // Analytics Actions
         logExperimentExposure({ userId, sessionKey, pageName, experiment }) {
             return globalMethods.callHttpClient({

src/store/store.spec.js

@@ -806,7 +806,8 @@ describe('Store', () => {
                     startTime: getRandomString(6, 6),
                     endTime: getRandomString(6, 6),
                     routeCode: getRandomString(6, 6),
-                    jobMaxMinutes: getRandomString(6, 6)
+                    jobMaxMinutes: getRandomString(6, 6),
+                    jobMinMinutes: getRandomString(6, 6)
                 };
                 store.order.schedule = schedule;
                 globalMethods.callHttpClient = jest.fn().mockReturnValue(Promise.resolve({}));
@@ -822,7 +823,8 @@ describe('Store', () => {
                             startTime: schedule.startTime,
                             endTime: schedule.endTime,
                             routeCode: schedule.routeCode,
-                            jobMaxMinutes: schedule.jobMaxMinutes
+                            jobMaxMinutes: schedule.jobMaxMinutes,
+                            jobMinMinutes: schedule.jobMinMinutes
                         })
                     })
                 }));