diff --git a/src/digital-components/date-picker/date-picker.vue b/src/digital-components/date-picker/date-picker.vue index fefeb30ff..bc4d6318e 100644 --- a/src/digital-components/date-picker/date-picker.vue +++ b/src/digital-components/date-picker/date-picker.vue @@ -31,8 +31,8 @@
SaturdayS
initialViewEndDate) { // should part of 1st month be hidden? @@ -243,7 +288,7 @@ export default { } } - let myPromise = new Promise((resolve, reject) => { + const myPromise = new Promise((resolve, reject) => { const response = config.customSelectableDatesCallback( initialViewStartDate.toISOString().split("T")[0], initialViewEndDate.toISOString().split("T")[0], @@ -431,12 +476,6 @@ export default { "-" + forceTwoDigitString(i); - const thisDate = { - year: yearNum, - month: monthIndex, - date: i, - dateString: dateString, - }; if (offset === 0 && i === this.todayDateNum) { dayClasses += "current-day"; } @@ -457,11 +496,9 @@ export default { const dateObject = { dateNum: i, dayClasses: dayClasses, - inputValue: thisDate, + inputValue: dateString, isSelectable: - this.selectableDatesData.findIndex( - (date) => date.dateString === dateString - ) > -1 + this.selectableDatesData.findIndex((date) => date.date === dateString) > -1 ? true : false, }; @@ -510,8 +547,8 @@ export default { if (monthToShow) { // make new API call with this month's start and end dates await this.updateSelectableDates( - monthToShow.dates[monthStartDateNum].inputValue.dateString, - monthToShow.dates[monthToShow.dates.length - 1].inputValue.dateString + monthToShow.dates[monthStartDateNum].inputValue, + monthToShow.dates[monthToShow.dates.length - 1].inputValue ); this.isLoading = false; this.hideSomeDaysForInitialView = false; // if hid days on initial partial view, this will reveal those days @@ -531,13 +568,13 @@ export default { ); moreSelectableDates.days.forEach((selectableDate) => { const index = this.selectableDatesData.findIndex( - (obj) => obj.dateString === selectableDate.dateString + (dateObj) => dateObj.date === selectableDate.date ); - if (index === -1) this.selectableDatesData.push(selectableDate); + if (index === -1) this.selectableDatesData.push(selectableDate.date); this.months.forEach((month) => { - // TODO: avoid checking all calendar date; maybe only ones between monthStart and monthEnd as defined above? + // TODO: avoid checking all calendar dates; maybe only ones between monthStart and monthEnd as defined above? month.dates.forEach((date) => { - if (date.inputValue.dateString === selectableDate.dateString) { + if (date.inputValue === selectableDate.date) { date["isSelectable"] = true; } }); @@ -808,7 +845,6 @@ export default { .btn-link { font-weight: 500; text-underline-offset: 4px; - box-shadow: none !important; // TODO: FIX THIS position: absolute; top: 90%; } diff --git a/src/layouts/schedule/schedule.vue b/src/layouts/schedule/schedule.vue index 42775f476..4a80e74d2 100644 --- a/src/layouts/schedule/schedule.vue +++ b/src/layouts/schedule/schedule.vue @@ -107,29 +107,16 @@ const getAvailableDates = async (startDate, endDate, appointmentType, providerNu ); } - const newShopTimeSlots = newTimeSlotsResponse.data; - return convertApiResponse(newShopTimeSlots); -}; -const convertApiResponse = (responseData) => { - // DATA CONVERSION - responseData?.days.forEach((date) => { - const dateString = date.date; - date.dateString = dateString; - const dateStringPieces = dateString.split("-"); - date.year = Number(dateStringPieces[0]); - date.month = Number(dateStringPieces[1]); - date.date = Number(dateStringPieces[2]); - }); - return responseData; + return newTimeSlotsResponse.data; }; export default { name: "schedule", data() { return { - selectedDate: null, + selectedDate: this.getSelectedDate(), selectedTimeSlotData: { - id: null, + id: this.getSelectedRouteCode(), isPremiumAppointment: null, }, selectableDatesData: [], @@ -215,7 +202,7 @@ export default { if (this.selectedDate === null) { return null; } - return this.selectableDatesData.days.find( + return this.selectableDatesData.days?.find( (selectableDate) => selectableDate.dateString === this.selectedDate.dateString ); }, @@ -226,13 +213,15 @@ export default { const timeSlotSelectedObject = this.getTimeSlotObjectFromTimeSlotId( this.selectedTimeSlotData.id ); + if (timeSlotSelectedObject) { return { date: this.selectedDate.dateString, startTime: timeSlotSelectedObject.startTime, endTime: timeSlotSelectedObject.endTime, routeCode: this.selectedTimeSlotData.id, - jobMaxMinutes: this.selectableDatesData.estimatedServiceMinutesMaximum, + jobMaxMinutes: + this.selectableDatesData.estimatedServiceMinutesMaximum.toString(), }; } else { return null; @@ -273,6 +262,12 @@ export default { ).timeSlots; return timeSlots.find((timeSlot) => timeSlot.id === timeSlotId); }, + getSelectedDate() { + return store.getters.order.schedule.date; + }, + getSelectedRouteCode() { + return store.getters.order.schedule.routeCode; + }, timeSlotModalClosed() { // Clear the selectedDate if no timeSlot has been selected if (!this.selectedTimeSlotData.id) { @@ -335,12 +330,11 @@ export default { this.$router.navigateWithoutSaving(this.navigationScenarios.CLICKED_BACK, this.$route); }, async forwardButtonAction() { - await this.dispatchStoreAction( + this.dispatchStoreAction( this.storeActions.SAVE_SCHEDULE, this.appointmentDateAndTime, false ); - navigateToHeritageFunnel({ loadingModal: this.$refs.loadingModal }); }, }, diff --git a/src/layouts/schedule/time-slot-modal-question/time-slot-modal-question.vue b/src/layouts/schedule/time-slot-modal-question/time-slot-modal-question.vue index a622dd875..62d052941 100644 --- a/src/layouts/schedule/time-slot-modal-question/time-slot-modal-question.vue +++ b/src/layouts/schedule/time-slot-modal-question/time-slot-modal-question.vue @@ -157,9 +157,10 @@ export default { return false; }, dateSelectedReadableDate() { - if (this.dateAndTimeSlotData === null) { + if (!this.dateAndTimeSlotData) { return null; } + // This conversion ensures we don't get get GMT induced date changes const dateObject = new Date(`${this.dateAndTimeSlotData.dateString}T00:00:00`); // Ex: Tuesday, April 22 @@ -170,7 +171,7 @@ export default { }); }, availableTimeSlots() { - if (this.dateAndTimeSlotData === null) { + if (!this.dateAndTimeSlotData) { return null; } if (this.appointmentType === AppointmentTypeStrings.DROP_OFF) { diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue index 713cdb089..252eac529 100644 --- a/src/layouts/service-location/service-location.vue +++ b/src/layouts/service-location/service-location.vue @@ -142,7 +142,7 @@ export default { city: this.getServiceCityFromStore(), state: this.getServiceStateFromStore(), zipCode: this.getServiceZipCodeFromStore(), - isVehicleProtected: null, + isVehicleProtected: this.getIsVehicleProtectedFromStore(), isGlassServiceableInshop: null, isRecalibrationServiceableInshop: null, isGlassServiceableMobile: null, @@ -348,6 +348,9 @@ export default { getServiceZipCodeFromStore() { return store.getters.order.serviceLocation.zipCode; }, + getIsVehicleProtectedFromStore() { + return store.getters.order.serviceLocation.isVehicleProtected; + }, getSelectedAppointmentType() { return store.getters.order.serviceLocation.appointmentType; }, diff --git a/src/layouts/service-location/shop-question/shop-list-button/shop-list-button.vue b/src/layouts/service-location/shop-question/shop-list-button/shop-list-button.vue index 73c07a85a..f29ccf37b 100644 --- a/src/layouts/service-location/shop-question/shop-list-button/shop-list-button.vue +++ b/src/layouts/service-location/shop-question/shop-list-button/shop-list-button.vue @@ -63,13 +63,11 @@ export default { .availabilityRatingCallback(startDate, endDate, shopAppointmentType, this.value) .then((data) => { this.availabilityRating = data; - this.isLoaderDisplayed = false; }); } }, data() { return { - isLoaderDisplayed: false, availabilityRating: null, }; }, @@ -80,6 +78,9 @@ export default { "true" ); }, + isLoaderDisplayed() { + return this.availabilityRating == null; + }, availabilityRatingClass() { if (this.availabilityRating == null) { return "gray"; @@ -191,7 +192,7 @@ export default { .button-auxillary-copy { box-sizing: border-box; justify-content: right; - line-height: 1.25rem !important; + line-height: 1.25rem; font-weight: 500; font-size: 0.75rem; align-items: center; @@ -204,7 +205,7 @@ export default { } .loader:after { - background-color: $gray-300 !important; + background-color: $gray-300; height: 1rem; width: 1rem; } @@ -220,7 +221,7 @@ export default { } &.gray { - color: $gray-600 !important; + color: $gray-600; background-color: $gray-100; padding-left: 0.125rem; padding-right: 0.125rem; diff --git a/src/layouts/service-location/shop-question/shop-question.vue b/src/layouts/service-location/shop-question/shop-question.vue index 2bc4cba7b..929c779af 100644 --- a/src/layouts/service-location/shop-question/shop-question.vue +++ b/src/layouts/service-location/shop-question/shop-question.vue @@ -280,7 +280,7 @@ export default { border-radius: 0.5rem; display: flex; flex-direction: row; - padding: 0.5rem 0.5rem 0.5rem 1.5rem !important; + padding: 0.5rem 0.5rem 0.5rem 1.5rem; gap: 0.25rem; .alert-heading { diff --git a/src/store/index.js b/src/store/index.js index bb8ba2868..67917bf01 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -39,11 +39,13 @@ const getDefaultState = () => { }, serviceLocation: { address: null, + address2: null, city: null, state: null, zipCode: null, zipCodeCtu: null, appointmentType: null, + isVehicleProtected: null, provider: { providerNumber: null, address: { @@ -84,6 +86,7 @@ const getDefaultState = () => { startTime: null, endTime: null, routeCode: null, + jobMaxMinutes: null, }, referralNumber: null, referralDate: null, @@ -268,6 +271,7 @@ export const mutations = { state.order.schedule.startTime = scheduleInfo.startTime; state.order.schedule.endTime = scheduleInfo.endTime; state.order.schedule.routeCode = scheduleInfo.routeCode; + state.order.schedule.jobMaxMinutes = scheduleInfo.jobMaxMinutes; } }, @@ -440,6 +444,7 @@ export const mutations = { state.order.schedule.startTime = sessionInformation.order.schedule?.startTime; state.order.schedule.endTime = sessionInformation.order.schedule?.endTime; state.order.schedule.routeCode = sessionInformation.order.schedule?.routeCode; + state.order.schedule.jobMaxMinutes = sessionInformation.order.schedule?.jobMaxMinutes; }, updateExperiments(state, experiments) { state.applicationUser.experiments = experiments; @@ -1340,6 +1345,7 @@ export const actions = { startTime: order.schedule?.startTime, endTime: order.schedule?.endTime, routeCode: order.schedule?.routeCode, + jobMaxMinutes: order.schedule?.jobMaxMinutes, }, existingPromoCode: null, referralCorrelationId: order.referralCorrelationId, diff --git a/src/styles/common-styles.scss b/src/styles/common-styles.scss index 73845e5cc..f8e1c50f1 100644 --- a/src/styles/common-styles.scss +++ b/src/styles/common-styles.scss @@ -56,3 +56,9 @@ body { height: calc(100% - 72px); } } +//Disable scroll of main container when modal is open +.modal-open { + .page-container-grouped-styles { + overflow: hidden; + } +} diff --git a/src/styles/shared-input-button-styles.scss b/src/styles/shared-input-button-styles.scss index 9af066bb0..07329fc71 100644 --- a/src/styles/shared-input-button-styles.scss +++ b/src/styles/shared-input-button-styles.scss @@ -9,6 +9,7 @@ position: relative; z-index: 5; @include box-shadow-hover($blue-300); + border-radius: 0.5rem; } } } diff --git a/src/styles/ux-variables.scss b/src/styles/ux-variables.scss index 1e95a4052..976e8ed04 100644 --- a/src/styles/ux-variables.scss +++ b/src/styles/ux-variables.scss @@ -190,3 +190,6 @@ $alert-color-scale: 40%; // This affects all [Bootstrap] modals $modal-fade-transform: translate(0, 100%); $modal-backdrop-opacity: 0; + +//Disable default !important behavior +$enable-important-utilities: false; diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue index 7755249ab..ee8785022 100644 --- a/src/ux-components/list-card/list-card.vue +++ b/src/ux-components/list-card/list-card.vue @@ -94,7 +94,7 @@ export default { + .list-card-content { outline: none; - display: block; + display: flex; position: relative; p {