From e0f09edec2b8d26284f79208c5df3ec3a485509d Mon Sep 17 00:00:00 2001 From: Adam Caouette Date: Wed, 31 May 2023 02:51:23 -0400 Subject: [PATCH 01/12] CSR-886: fix number of weeks logic --- .../date-picker/date-picker.vue | 53 +++++++++++++++++-- 1 file changed, 49 insertions(+), 4 deletions(-) diff --git a/src/digital-components/date-picker/date-picker.vue b/src/digital-components/date-picker/date-picker.vue index bd9ae6d9a..c1c66c5d3 100644 --- a/src/digital-components/date-picker/date-picker.vue +++ b/src/digital-components/date-picker/date-picker.vue @@ -193,6 +193,51 @@ export default { weekEndDate: weekEndDate, }); } + + // are any of these weeks split between two months? + const hasSplitWeek = (week) => { + return week.weekStartDate.getMonth() !== week.weekEndDate.getMonth() ? true : false; + }; + const splitWeekIndex = weeks.findIndex(hasSplitWeek); + + if (splitWeekIndex > -1) { + const week1 = []; + const week2 = []; + let switchToWeek2 = false; + + for (let j = 0; j < 7; j++) { + const newDate = new Date(weeks[splitWeekIndex].weekStartDate); + newDate.setDate(newDate.getDate() + j); + if (newDate.getDate() === 1) switchToWeek2 = true; + if (switchToWeek2) { + week2.push(newDate); + } else { + week1.push(newDate); + } + } + + const week1EndDate = week1[week1.length - 1]; + const week2StartDate = week2[0]; + + if (week1EndDate < today) { + // replace week 1 with week 2 + weeks[splitWeekIndex].weekStartDate = week2StartDate; + } else { + const newWeek = { + weekNum: weeks[splitWeekIndex].weekNum, + weekStartDate: week2StartDate, + weekEndDate: weeks[splitWeekIndex].weekEndDate, + }; + weeks[splitWeekIndex].weekEndDate = week1EndDate; + weeks.splice(splitWeekIndex + 1, 0, newWeek); + weeks.pop(); + weeks.forEach((item, index) => { + if (index > splitWeekIndex) { + item.weekNum = item.weekNum + 1; + } + }); + } + } return weeks; }, async loadInitialData(config) { @@ -222,8 +267,8 @@ export default { const initialViewStartDate = todayDate; const initialViewEndDate = initialViewWeeks[initialViewWeeks.length - 1].weekEndDate; - const saturday1month = initialViewWeeks[0].weekEndDate.getMonth(); - const sunday5month = + const firstSaturdayMonth = initialViewWeeks[0].weekEndDate.getMonth(); + const lastSundayMonth = initialViewWeeks[initialViewWeeks.length - 1].weekStartDate.getMonth(); let hideSomeDaysForInitialView = false; @@ -231,10 +276,10 @@ export default { // TODO - NEED TO CREATE OPPOSITE LOGIC FOR "past" DIRECTION LIKE BELOW vvvvv if (calendarViewDirection === "future") { - if (saturday1month !== sunday5month) { + if (firstSaturdayMonth !== lastSundayMonth) { hideSomeDaysForInitialView = true; } - if (initialViewStartDate.getMonth() === sunday5month) { + if (initialViewStartDate.getMonth() === lastSundayMonth) { hideSecondMonth = true; if (currentMonthEnd > initialViewEndDate) { // should part of 1st month be hidden? From 9d0d2af36192954ae599adb4d9950c9cfb75763c Mon Sep 17 00:00:00 2001 From: Bryan Mauger Date: Wed, 31 May 2023 11:29:19 -0400 Subject: [PATCH 02/12] CSR-1426 disable Bootstrap !important behavior. Also disable page scroll when modal is open. --- src/styles/common-styles.scss | 6 ++++++ src/styles/shared-input-button-styles.scss | 1 + src/styles/ux-variables.scss | 3 +++ src/ux-components/list-card/list-card.vue | 2 +- 4 files changed, 11 insertions(+), 1 deletion(-) 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..8d0c394aa 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: .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 { From 4eb071901897ae38af2503df2d8e04d4114c7801 Mon Sep 17 00:00:00 2001 From: Bryan Mauger Date: Wed, 31 May 2023 11:30:41 -0400 Subject: [PATCH 03/12] Format code. --- src/styles/shared-input-button-styles.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/shared-input-button-styles.scss b/src/styles/shared-input-button-styles.scss index 8d0c394aa..07329fc71 100644 --- a/src/styles/shared-input-button-styles.scss +++ b/src/styles/shared-input-button-styles.scss @@ -9,7 +9,7 @@ position: relative; z-index: 5; @include box-shadow-hover($blue-300); - border-radius: .5rem; + border-radius: 0.5rem; } } } From 63245465a8a947833071969d5f2a2ce6a951beaa Mon Sep 17 00:00:00 2001 From: Scott Kiener Date: Wed, 31 May 2023 11:44:57 -0400 Subject: [PATCH 04/12] CSR-1137 | Remove pre-emptive pricing call Added them in sequence to run together with the async group Also removed the logApiCall:false --- src/layouts/schedule/schedule.vue | 44 +++++++++++++------------------ src/store/index.js | 2 -- 2 files changed, 19 insertions(+), 27 deletions(-) diff --git a/src/layouts/schedule/schedule.vue b/src/layouts/schedule/schedule.vue index 3a4290cb9..917613296 100644 --- a/src/layouts/schedule/schedule.vue +++ b/src/layouts/schedule/schedule.vue @@ -73,7 +73,7 @@ import { getRouterLinkRouteFromCopy, getRouterLinkDisplayTextFromCopy, } from "@/helpers/cms-content-helper"; -import { AppointmentTypeStrings, PREMIUM_FEE_PART_TYPE } from "./constants/schedule-constants"; +import { AppointmentTypeStrings } from "./constants/schedule-constants"; import { errorMessages } from "@/constants/error-messages"; import { required } from "@/helpers/validation-rules"; import store from "@/store"; @@ -146,24 +146,24 @@ export default { customSelectableDatesCallback: getAvailableDates, }); - // Price EARLY BIRD pre-emptively to allow for asynchronous call to pricing - const pricingPromise = baseMixin.methods.dispatchStoreAction( - storeActions.PRICE_ORDER_ITEMS_AND_SAVE_SERVER_DATA, - { - availableLineItems: [ - { - partNumber: PREMIUM_FEE_PART_TYPE, - partType: PREMIUM_FEE_PART_TYPE, - description: null, - }, - ], - }, - false - ); - const premiumFeePromise = baseMixin.methods.dispatchStoreAction( storeActions.GET_MOBILE_PREMIUM_FEE ); + + const premiumFeeWithPricePromise = premiumFeePromise.then(result => { + if (result.data) { + return baseMixin.methods.dispatchStoreAction( + storeActions.PRICE_ORDER_ITEMS_AND_SAVE_SERVER_DATA, + { + availableLineItems: [result.data], + }, + false + ); + } else { + return result.data; + } + }); + const alertReasonsPromise = locationAlerts.methods.loadInitialData( store.getters.order.serviceLocation.zipCodeCtu ); @@ -182,12 +182,8 @@ export default { promise: datePickerInitialDataPromise, }, { - resultKey: "premiumFee", - promise: premiumFeePromise, - }, - { - resultKey: "pricingResults", - promise: pricingPromise, + resultKey: "premiumFeeWithPrice", + promise: premiumFeeWithPricePromise, }, ]; @@ -199,9 +195,7 @@ export default { vm.$refs.datePicker.initializeComponent(resultMap.datePickerInitialData); vm.$refs.locationAlerts.initializeComponent(resultMap.alertReasons); vm.selectableDatesData = resultMap.datePickerInitialData.initialShopTimeSlotsResponse; - if (resultMap.premiumFee) { - vm.mobilePremiumAppointmentFee = resultMap.pricingResults[0]; - } + vm.mobilePremiumAppointmentFee = resultMap.premiumFeeWithPrice ? resultMap.premiumFeeWithPrice[0] : null; }); }, computed: { diff --git a/src/store/index.js b/src/store/index.js index ee7ea4911..bb8ba2868 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -1187,7 +1187,6 @@ export const actions = { method: endpoints.GetShopTimeSlots.method, endpoint: endpoints.GetShopTimeSlots.url, payload: payload, - logApiCall: false, }); }, @@ -1239,7 +1238,6 @@ export const actions = { method: endpoints.GetMobileTimeSlots.method, endpoint: endpoints.GetMobileTimeSlots.url, payload: payload, - logApiCall: false, }); }, From 122f9bffb5735cd54a379d475c8aeca61d752efe Mon Sep 17 00:00:00 2001 From: Scott Kiener Date: Wed, 31 May 2023 11:48:35 -0400 Subject: [PATCH 05/12] CSR-1137 | Formatting --- src/layouts/schedule/schedule.vue | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/layouts/schedule/schedule.vue b/src/layouts/schedule/schedule.vue index 917613296..42775f476 100644 --- a/src/layouts/schedule/schedule.vue +++ b/src/layouts/schedule/schedule.vue @@ -150,7 +150,7 @@ export default { storeActions.GET_MOBILE_PREMIUM_FEE ); - const premiumFeeWithPricePromise = premiumFeePromise.then(result => { + const premiumFeeWithPricePromise = premiumFeePromise.then((result) => { if (result.data) { return baseMixin.methods.dispatchStoreAction( storeActions.PRICE_ORDER_ITEMS_AND_SAVE_SERVER_DATA, @@ -195,7 +195,9 @@ export default { vm.$refs.datePicker.initializeComponent(resultMap.datePickerInitialData); vm.$refs.locationAlerts.initializeComponent(resultMap.alertReasons); vm.selectableDatesData = resultMap.datePickerInitialData.initialShopTimeSlotsResponse; - vm.mobilePremiumAppointmentFee = resultMap.premiumFeeWithPrice ? resultMap.premiumFeeWithPrice[0] : null; + vm.mobilePremiumAppointmentFee = resultMap.premiumFeeWithPrice + ? resultMap.premiumFeeWithPrice[0] + : null; }); }, computed: { From 6a6b37d5e77ed416dc0ed1d1f86f400552e79b16 Mon Sep 17 00:00:00 2001 From: Adam Caouette Date: Thu, 1 Jun 2023 10:59:13 -0400 Subject: [PATCH 06/12] CSR-886: remove superfluous data elements, change date from object to string --- .../date-picker/date-picker.vue | 29 +++++++------------ src/layouts/schedule/schedule.vue | 15 +--------- 2 files changed, 11 insertions(+), 33 deletions(-) diff --git a/src/digital-components/date-picker/date-picker.vue b/src/digital-components/date-picker/date-picker.vue index e63349c67..384f5f697 100644 --- a/src/digital-components/date-picker/date-picker.vue +++ b/src/digital-components/date-picker/date-picker.vue @@ -31,8 +31,8 @@
SaturdayS
date.dateString === dateString - ) > -1 + this.selectableDatesData.findIndex((date) => date.date === dateString) > -1 ? true : false, }; @@ -555,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 @@ -576,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; } }); @@ -853,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 db17d966f..e5282203e 100644 --- a/src/layouts/schedule/schedule.vue +++ b/src/layouts/schedule/schedule.vue @@ -107,20 +107,7 @@ 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 { From dbda73479d5005ee3e7d9591f76542ee782bf159 Mon Sep 17 00:00:00 2001 From: Adam Caouette Date: Thu, 1 Jun 2023 11:08:46 -0400 Subject: [PATCH 07/12] CSR-886: minor fixes (lets to consts) --- src/digital-components/date-picker/date-picker.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/digital-components/date-picker/date-picker.vue b/src/digital-components/date-picker/date-picker.vue index 384f5f697..bc4d6318e 100644 --- a/src/digital-components/date-picker/date-picker.vue +++ b/src/digital-components/date-picker/date-picker.vue @@ -254,7 +254,7 @@ export default { const todayYearNum = todayDate.getFullYear(); // TODO - set up currentMonthStart if direction is PAST: // let currentMonthStart = new Date(todayYearNum, todayMonthIndex - 1, 1); - let currentMonthEnd = new Date(todayYearNum, todayMonthIndex, 0); + const currentMonthEnd = new Date(todayYearNum, todayMonthIndex, 0); let calendarViewDirection = "none"; if (config.selectableDatesSetting === "past") calendarViewDirection = "past"; @@ -288,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], From 8e93eda0ce39c43361e3768b159e40b50164874d Mon Sep 17 00:00:00 2001 From: Leah Schumann Date: Fri, 2 Jun 2023 06:30:09 -0400 Subject: [PATCH 08/12] Removed !important flags from shop list components --- .../shop-list-button/shop-list-button.vue | 15 ++++++++------- .../shop-question/shop-question.vue | 2 +- 2 files changed, 9 insertions(+), 8 deletions(-) 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 6509c7d5c..14cc91ca4 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 @@ -73,10 +73,11 @@ export default { }, computed: { displayAvailabilityIndicators() { - return experimentMixin.methods.hasSettingEqualTo( - experimentSettings.DISPLAY_AVAILABILITY_INDICATORS, - "true" - ); + return true; + // return experimentMixin.methods.hasSettingEqualTo( + // experimentSettings.DISPLAY_AVAILABILITY_INDICATORS, + // "true" + // ); }, isLoaderDisplayed() { return this.availabilityRating == null; @@ -192,7 +193,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; @@ -205,7 +206,7 @@ export default { } .loader:after { - background-color: $gray-300 !important; + background-color: $gray-300; height: 1rem; width: 1rem; } @@ -221,7 +222,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 { From 952d99d3926eabe66a6f82a25a0d05e5b31b9ebc Mon Sep 17 00:00:00 2001 From: Leah Schumann Date: Fri, 2 Jun 2023 07:36:55 -0400 Subject: [PATCH 09/12] Added missing fields to vuex, and loading method for isVehicleProtected --- src/layouts/service-location/service-location.vue | 5 ++++- src/store/index.js | 4 +++- 2 files changed, 7 insertions(+), 2 deletions(-) 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/store/index.js b/src/store/index.js index 014ed71af..3d1b21dd4 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: { @@ -1833,7 +1835,7 @@ export const actions = { }, saveGlassParts(context, parts) { - context.commit(storeMutations.UPDATE_GLASS_PARTS, parts); + context.commit(storeMutations.UPDATE_GLASS_PARTS, parts); }, clearVin(context) { From c26b03e961a7e130d6d29074581ecfecc7355f33 Mon Sep 17 00:00:00 2001 From: Leah Schumann Date: Fri, 2 Jun 2023 07:38:42 -0400 Subject: [PATCH 10/12] Prettified --- src/store/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/store/index.js b/src/store/index.js index 3d1b21dd4..d6ffe60c0 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -1835,7 +1835,7 @@ export const actions = { }, saveGlassParts(context, parts) { - context.commit(storeMutations.UPDATE_GLASS_PARTS, parts); + context.commit(storeMutations.UPDATE_GLASS_PARTS, parts); }, clearVin(context) { From 3583b1145688b377a5112c0f8a7c6f67f52d58c7 Mon Sep 17 00:00:00 2001 From: Leah Schumann Date: Fri, 2 Jun 2023 09:05:02 -0400 Subject: [PATCH 11/12] Removed test conditional --- .../shop-question/shop-list-button/shop-list-button.vue | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) 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 14cc91ca4..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 @@ -73,11 +73,10 @@ export default { }, computed: { displayAvailabilityIndicators() { - return true; - // return experimentMixin.methods.hasSettingEqualTo( - // experimentSettings.DISPLAY_AVAILABILITY_INDICATORS, - // "true" - // ); + return experimentMixin.methods.hasSettingEqualTo( + experimentSettings.DISPLAY_AVAILABILITY_INDICATORS, + "true" + ); }, isLoaderDisplayed() { return this.availabilityRating == null; From db7ac46935ed739be8aac34eb6c28be1c6c8f993 Mon Sep 17 00:00:00 2001 From: Scott Kiener Date: Mon, 5 Jun 2023 15:37:09 -0400 Subject: [PATCH 12/12] CSR-1137 | Handle auto-loading of existing store data Date and time-slot are auto selected Date-picker still needs work to handle dates that are beyond initial load set. --- src/layouts/schedule/schedule.vue | 14 +++++++------- .../time-slot-modal-question.vue | 18 +++++++++--------- 2 files changed, 16 insertions(+), 16 deletions(-) diff --git a/src/layouts/schedule/schedule.vue b/src/layouts/schedule/schedule.vue index 4a80e74d2..cbfa07d33 100644 --- a/src/layouts/schedule/schedule.vue +++ b/src/layouts/schedule/schedule.vue @@ -185,6 +185,7 @@ export default { vm.mobilePremiumAppointmentFee = resultMap.premiumFeeWithPrice ? resultMap.premiumFeeWithPrice[0] : null; + vm.updateFooterButtonText(vm.selectedTimeSlotData); }); }, computed: { @@ -199,11 +200,11 @@ export default { return this.$store.getters.order.serviceLocation.appointmentType; }, timeSlotsForSelectedDate() { - if (this.selectedDate === null) { + if (!this.selectedDate) { return null; } return this.selectableDatesData.days?.find( - (selectableDate) => selectableDate.dateString === this.selectedDate.dateString + (selectableDate) => selectableDate.date === this.selectedDate ); }, appointmentDateAndTime() { @@ -213,10 +214,9 @@ export default { const timeSlotSelectedObject = this.getTimeSlotObjectFromTimeSlotId( this.selectedTimeSlotData.id ); - if (timeSlotSelectedObject) { return { - date: this.selectedDate.dateString, + date: this.selectedDate, startTime: timeSlotSelectedObject.startTime, endTime: timeSlotSelectedObject.endTime, routeCode: this.selectedTimeSlotData.id, @@ -258,7 +258,7 @@ export default { }, getTimeSlotObjectFromTimeSlotId(timeSlotId) { const timeSlots = this.selectableDatesData.days.find( - (selectableDate) => selectableDate.dateString === this.selectedDate.dateString + (selectableDate) => selectableDate.date === this.selectedDate ).timeSlots; return timeSlots.find((timeSlot) => timeSlot.id === timeSlotId); }, @@ -308,7 +308,7 @@ export default { }, convertSelectedDateToShortMonthAndDay(selectedDate) { // This conversion ensures we don't get get GMT induced date changes - const dateObject = new Date(`${selectedDate.dateString}T00:00:00`); + const dateObject = new Date(`${selectedDate}T00:00:00`); // Ex: April 25 return dateObject.toLocaleDateString("en-us", { month: "short", day: "numeric" }); }, @@ -348,7 +348,7 @@ export default { }; } }, - selectedTimeSlotData() { + selectedTimeSlotData(newValue) { this.updateFooterButtonText(this.selectedTimeSlotData); }, }, 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 62d052941..10640dfd9 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 @@ -78,13 +78,14 @@ export default { }, data() { return { - selectedTimeSlotId: null, + selectedTimeSlotId: this.modelValue.id, timeSlotModalListButton: timeSlotModalListButton, }; }, setup(props) { const { handleChange } = useField("time-slot-modal-question", props.validationRules); - + // Run validation on component load + handleChange(props.modelValue.id); return { handleChange, }; @@ -92,6 +93,11 @@ export default { watch: { modelValue() { // Run component validation that is used at parent level + if (this.modelValue.isPremiumAppointment) { + this.selectedTimeSlotId = this.addPremiumFlagToInput(this.modelValue.id); + } else { + this.selectedTimeSlotId = this.modelValue.id; + } this.handleChange(this.modelValue.id); }, availableTimeSlots(newValue) { @@ -162,7 +168,7 @@ export default { } // This conversion ensures we don't get get GMT induced date changes - const dateObject = new Date(`${this.dateAndTimeSlotData.dateString}T00:00:00`); + const dateObject = new Date(`${this.dateAndTimeSlotData.date}T00:00:00`); // Ex: Tuesday, April 22 return dateObject.toLocaleDateString("en-us", { weekday: "long", @@ -203,12 +209,6 @@ export default { }, // fires any time the modal is closed, AFTER "closeModal" fires if footer button is used onModalClosed() { - // Reset component state to parent's state - if (this.modelValue.isPremiumAppointment) { - this.selectedTimeSlotId = this.addPremiumFlagToInput(this.modelValue.id); - } else { - this.selectedTimeSlotId = this.modelValue.id; - } this.$emit("time-slot-modal-closed"); }, // Expected input: "HH:MM"