From 491f6b273a197ee5f8154b3932c83c22cffdda08 Mon Sep 17 00:00:00 2001 From: Scott Kiener Date: Mon, 8 May 2023 09:25:57 -0400 Subject: [PATCH 01/12] CSR-1137 | Initial creation of time-slot modal --- src/constants/scheduling.js | 4 +- .../button-question/button-question.vue | 1 - src/digital-components/modal/modal.vue | 14 ++- .../text-block/text-block.vue | 2 +- src/layouts/schedule/schedule.vue | 45 ++++++++ .../time-slot-selection-modal.vue | 109 ++++++++++++++++++ 6 files changed, 170 insertions(+), 5 deletions(-) create mode 100644 src/layouts/schedule/time-slot-selection-modal/time-slot-selection-modal.vue diff --git a/src/constants/scheduling.js b/src/constants/scheduling.js index c656ac60a..0ded16a32 100644 --- a/src/constants/scheduling.js +++ b/src/constants/scheduling.js @@ -13,4 +13,6 @@ const monthsOfYear = [ "December", ]; -export { monthsOfYear }; +const daysOfWeek = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]; + +export { monthsOfYear, daysOfWeek }; diff --git a/src/digital-components/button-question/button-question.vue b/src/digital-components/button-question/button-question.vue index 5d8db68d4..26288c036 100644 --- a/src/digital-components/button-question/button-question.vue +++ b/src/digital-components/button-question/button-question.vue @@ -119,7 +119,6 @@ export default { isRequired: Boolean, isOverflowScrollable: Boolean, isWide: Boolean, - isCashOrInsurance: Boolean, modelValue: [Array, Number, String], value: [Number, String], validationRules: String, diff --git a/src/digital-components/modal/modal.vue b/src/digital-components/modal/modal.vue index cec960fa1..823df0f98 100644 --- a/src/digital-components/modal/modal.vue +++ b/src/digital-components/modal/modal.vue @@ -56,6 +56,13 @@ export default { onModalClosedCallback: { type: Function, }, + allowManualFooterDisableOverride: { + type: Boolean, + default: false, + }, + isFooterDisabledManualOverride: { + type: Boolean, + }, }, setup() { const modalId = `modal-${crypto.randomUUID()}`; @@ -98,10 +105,13 @@ export default { }, computed: { isFooterButtonDisabled() { - if (!this.meta.touched) { + if (this.allowManualFooterDisableOverride !== null) { + return this.isFooterDisabledManualOverride; + } else if (!this.meta.touched) { return !this.meta.valid; + } else { + return !this.meta.dirty || !this.meta.valid; } - return !this.meta.dirty || !this.meta.valid; }, }, components: { diff --git a/src/digital-components/text-block/text-block.vue b/src/digital-components/text-block/text-block.vue index 9e7df6312..2eb45bf74 100644 --- a/src/digital-components/text-block/text-block.vue +++ b/src/digital-components/text-block/text-block.vue @@ -1,6 +1,6 @@ diff --git a/src/layouts/schedule/schedule.vue b/src/layouts/schedule/schedule.vue index f81d5c0aa..69dc7455b 100644 --- a/src/layouts/schedule/schedule.vue +++ b/src/layouts/schedule/schedule.vue @@ -23,6 +23,14 @@ selectableDatesSetting="custom" v-model="selectedDate" :customSelectableDatesCallback="getAvailableDates" /> + + diff --git a/src/layouts/schedule/time-slot-selection-modal/time-slot-selection-modal.vue b/src/layouts/schedule/time-slot-selection-modal/time-slot-selection-modal.vue new file mode 100644 index 000000000..9763b5359 --- /dev/null +++ b/src/layouts/schedule/time-slot-selection-modal/time-slot-selection-modal.vue @@ -0,0 +1,109 @@ + + + + + From 074beab14978835fbacfa89a8e64c04232f53c80 Mon Sep 17 00:00:00 2001 From: Scott Kiener Date: Mon, 8 May 2023 09:46:21 -0400 Subject: [PATCH 02/12] CSR-1137 | Rename modal slot method --- src/layouts/schedule/schedule.vue | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/layouts/schedule/schedule.vue b/src/layouts/schedule/schedule.vue index ad4bf53b2..5a7211f43 100644 --- a/src/layouts/schedule/schedule.vue +++ b/src/layouts/schedule/schedule.vue @@ -30,7 +30,7 @@ :availableTimeSlots="availableTimeSlots" estimatedServiceMinutesMinimum="90" estimatedServiceMinutesMaximum="180" /> - + Date: Mon, 8 May 2023 15:47:37 -0400 Subject: [PATCH 03/12] CSR-1137 | Finished time slot selection for in shop --- src/layouts/schedule/schedule.vue | 130 +++++------------- .../time-slot-selection-modal.vue | 38 ++++- 2 files changed, 63 insertions(+), 105 deletions(-) diff --git a/src/layouts/schedule/schedule.vue b/src/layouts/schedule/schedule.vue index 5a7211f43..7bdda50d6 100644 --- a/src/layouts/schedule/schedule.vue +++ b/src/layouts/schedule/schedule.vue @@ -25,11 +25,11 @@ + v-model="selectedTimeSlotId" + :dateAndTimeSlotData="DateAndTimeSlotDataForTimeslotModal" + :estimatedServiceMinutesMinimum="selectableDatesData.estimatedServiceMinutesMinimum" + :estimatedServiceMinutesMaximum="selectableDatesData.estimatedServiceMinutesMaximum" + @timeSlotSaved="updateAppointmentDateAndTime" /> selectableDate.dateString === this.selectedDate.dateString); + } }, methods: { doesCopyContainRouterLink, @@ -219,10 +140,13 @@ export default { const newShopTimeSlots = newShopTimeSlotsResponse.data; // console.log("newShopTimeSlots ", newShopTimeSlots) + // ADD API CALL RESULTS TO EXISTING DATE DATA this.selectableDatesData = this.selectableDatesData.concat( this.convertApiResponse(newShopTimeSlots.days) ); + this.selectableDatesData.estimatedServiceMinutesMaximum = newShopTimeSlots.estimatedServiceMinutesMaximum; + this.selectableDatesData.estimatedServiceMinutesMinimum = newShopTimeSlots.estimatedServiceMinutesMinimum; console.log("this.selectableDatesData is now: ", this.selectableDatesData); // RETURN AGGREGATE DATE DATA @@ -241,9 +165,19 @@ export default { return responseData; }, openInshopTimeslotsModal() { - this.$refs["timeSlotModal"].openModal(); }, + updateAppointmentDateAndTime() { + let timeSlotSelectedObject = this.getTimeSlotObjectFromTimeSlotId(this.selectedTimeSlotId); + this.appointmentDateAndTime.date = this.selectedDate.dateString; + this.appointmentDateAndTime.startTime = timeSlotSelectedObject.startTime; + this.appointmentDateAndTime.endTime = timeSlotSelectedObject.endTime; + this.appointmentDateAndTime.id = this.selectedTimeSlotId; + }, + getTimeSlotObjectFromTimeSlotId(timeSlotId) { + let timeSlots = this.selectableDatesData.find(selectableDate => selectableDate.dateString === this.selectedDate.dateString).timeSlots; + return timeSlots.find(timeSlot => timeSlot.id === timeSlotId); + }, backButtonAction() { this.$router.navigateWithoutSaving(this.navigationScenarios.CLICKED_BACK, this.$route); }, diff --git a/src/layouts/schedule/time-slot-selection-modal/time-slot-selection-modal.vue b/src/layouts/schedule/time-slot-selection-modal/time-slot-selection-modal.vue index 9763b5359..17a1c19db 100644 --- a/src/layouts/schedule/time-slot-selection-modal/time-slot-selection-modal.vue +++ b/src/layouts/schedule/time-slot-selection-modal/time-slot-selection-modal.vue @@ -17,7 +17,7 @@ class="mb-5" /> { + let hours = timeslot.startTime.split(":")[0]; + let minutes = timeslot.startTime.split(":")[1]; + let meridianNotation = "AM"; + if (timeslot.startTime.split(":")[0] > 12) { + hours -= 12; + meridianNotation = "PM"; + } + let readableTime = `${hours}:${minutes} ${meridianNotation}`; + return { + value: timeslot.id, + buttonLabel: readableTime, + }; + }); + }, }, methods: { openModal() { @@ -78,7 +101,8 @@ export default { // fires any time the footer button is used, is fired before "onModalClosed" closeModal() { this.$emit("update:modelValue", this.currentlySelectedTimeSlot); - this.$refs["timeSlots"].closeModal("test"); + this.$refs["timeSlots"].closeModal(); + this.$emit("timeSlotSaved"); }, // fires any time the modal is closed, AFTER "closeModal" fires if footer button is used onModalClosed() { From 6ca3d916baef44ed16886f67a0678574ef0c30cb Mon Sep 17 00:00:00 2001 From: Scott Kiener Date: Fri, 12 May 2023 10:56:54 -0400 Subject: [PATCH 04/12] CSR-1137 | Tech review changes --- src/layouts/schedule/schedule.vue | 56 ++++++++++--------- .../time-slot-modal-question.vue} | 37 ++++++------ 2 files changed, 51 insertions(+), 42 deletions(-) rename src/layouts/schedule/{time-slot-selection-modal/time-slot-selection-modal.vue => time-slot-modal-question/time-slot-modal-question.vue} (78%) diff --git a/src/layouts/schedule/schedule.vue b/src/layouts/schedule/schedule.vue index 7bdda50d6..8263b0b93 100644 --- a/src/layouts/schedule/schedule.vue +++ b/src/layouts/schedule/schedule.vue @@ -23,14 +23,14 @@ v-model="selectedDate" :customSelectableDatesCallback="getAvailableDates" /> - - + :estimatedServiceMinutesMaximum="selectableDatesData.estimatedServiceMinutesMaximum"/> + selectableDate.dateString === this.selectedDate.dateString); - } + }, + appointmentDateAndTime() { + if (!this.selectedTimeSlotId) { + return null; + } + const timeSlotSelectedObject = this.getTimeSlotObjectFromTimeSlotId(this.selectedTimeSlotId); + if (timeSlotSelectedObject) { + return { + date: this.selectedDate.dateString, + startTime: timeSlotSelectedObject.startTime, + endTime: timeSlotSelectedObject.endTime, + id: this.selectedTimeSlotId, + }; + } else { + return null; + } + + }, }, methods: { doesCopyContainRouterLink, @@ -164,18 +175,11 @@ export default { }); return responseData; }, - openInshopTimeslotsModal() { - this.$refs["timeSlotModal"].openModal(); - }, - updateAppointmentDateAndTime() { - let timeSlotSelectedObject = this.getTimeSlotObjectFromTimeSlotId(this.selectedTimeSlotId); - this.appointmentDateAndTime.date = this.selectedDate.dateString; - this.appointmentDateAndTime.startTime = timeSlotSelectedObject.startTime; - this.appointmentDateAndTime.endTime = timeSlotSelectedObject.endTime; - this.appointmentDateAndTime.id = this.selectedTimeSlotId; + openInshopTimeSlotsModal() { + this.$refs["timeSlotModalQuestion"].openModal(); }, getTimeSlotObjectFromTimeSlotId(timeSlotId) { - let timeSlots = this.selectableDatesData.find(selectableDate => selectableDate.dateString === this.selectedDate.dateString).timeSlots; + const timeSlots = this.selectableDatesData.find(selectableDate => selectableDate.dateString === this.selectedDate.dateString).timeSlots; return timeSlots.find(timeSlot => timeSlot.id === timeSlotId); }, backButtonAction() { @@ -199,7 +203,7 @@ export default { Form, loadingModal, datePicker, - timeSlotSelectionModal, + timeSlotModalQuestion, }, }; diff --git a/src/layouts/schedule/time-slot-selection-modal/time-slot-selection-modal.vue b/src/layouts/schedule/time-slot-modal-question/time-slot-modal-question.vue similarity index 78% rename from src/layouts/schedule/time-slot-selection-modal/time-slot-selection-modal.vue rename to src/layouts/schedule/time-slot-modal-question/time-slot-modal-question.vue index 17a1c19db..d59cdbf4f 100644 --- a/src/layouts/schedule/time-slot-selection-modal/time-slot-selection-modal.vue +++ b/src/layouts/schedule/time-slot-modal-question/time-slot-modal-question.vue @@ -3,24 +3,23 @@ ref="timeSlots" class="time-slots-modal" :headerText="dateSelectedReadableDate" - footerButtonText="Save time slot" + :footerButtonText="footerCloseButtonText" allowManualFooterDisableOverride - :isFooterDisabledManualOverride="currentlySelectedTimeSlot === null" + :isFooterDisabledManualOverride="selectedTimeSlot === null" :onModalOpenedCallback="onModalOpened" :onModalClosedCallback="onModalClosed" @footer-button-event="closeModal"> @@ -34,38 +33,45 @@ import buttonQuestion from "@/digital-components/button-question/button-question import { daysOfWeek, monthsOfYear } from "@/constants/scheduling.js"; export default { - name: "timeSlotSelectionModal", + name: "timeSlotModalQuestion", props: { modelValue: Object, + cmsWidgetName: String, dateAndTimeSlotData: Object, estimatedServiceMinutesMinimum: Number, estimatedServiceMinutesMaximum: Number, }, data() { return { - currentlySelectedTimeSlot: null, + selectedTimeSlot: null, }; }, watch: { modelValue() { - this.currentlySelectedTimeSlot = this.modelValue; + this.selectedTimeSlot = this.modelValue; }, }, computed: { + appointmentDurationTextFromCms() { + return this.getCmsContent(this.cmsWidgetName, "SubheaderText"); + }, + footerCloseButtonText() { + return this.getCmsContent(this.cmsWidgetName, "FooterText"); + }, dateSelectedReadableDate() { if (this.dateAndTimeSlotData === null) { return null; } // This conversion ensures we don't get get GMT induced date changes - let dateObject = new Date (`${this.dateAndTimeSlotData.dateString}T00:00:00`); + const dateObject = new Date (`${this.dateAndTimeSlotData.dateString}T00:00:00`); const weekdayName = daysOfWeek[dateObject.getDay()]; const month = monthsOfYear[dateObject.getMonth()]; const numberDayOfMonth = dateObject.getDate(); // Ex. Tuesday, April 23 return `${weekdayName}, ${month} ${numberDayOfMonth}`; }, - durationSubHeaderText() { - let durationSubHeaderText = "Duration: "; + appointmentDurationTextWithTime() { + let durationSubHeaderText = this.appointmentDurationTextFromCms + " "; if (this.estimatedServiceMinutesMaximum >= 120) { durationSubHeaderText += `${this.estimatedServiceMinutesMinimum / 60} - ${ this.estimatedServiceMinutesMaximum / 60} hours`; @@ -74,7 +80,7 @@ export default { } return durationSubHeaderText; }, - availableTimeslots() { + availableTimeSlots() { if (this.dateAndTimeSlotData === null) { return null; } @@ -100,13 +106,12 @@ export default { }, // fires any time the footer button is used, is fired before "onModalClosed" closeModal() { - this.$emit("update:modelValue", this.currentlySelectedTimeSlot); + this.$emit("update:modelValue", this.selectedTimeSlot); this.$refs["timeSlots"].closeModal(); - this.$emit("timeSlotSaved"); }, // fires any time the modal is closed, AFTER "closeModal" fires if footer button is used onModalClosed() { - this.currentlySelectedTimeSlot = this.modelValue; + this.selectedTimeSlot = this.modelValue; }, }, components: { From 23711787dd54fd4d9bff85be8de51f2f74f64e68 Mon Sep 17 00:00:00 2001 From: Scott Kiener Date: Wed, 17 May 2023 14:08:16 -0400 Subject: [PATCH 05/12] CSR-1137 | All timeslot implementations working --- src/constants/endpoints.js | 5 + src/constants/store-actions.js | 1 + .../button-question/button-question.vue | 1 + src/digital-components/modal/modal.vue | 16 +- .../text-block/text-block.vue | 3 +- src/layouts/schedule/schedule.vue | 78 +++++++-- .../time-slot-modal-question.vue | 158 +++++++++++++++--- .../timeslot-modal-list-button.vue | 119 +++++++++++++ src/mixins/base-mixin.js | 1 + src/store/index.js | 13 +- 10 files changed, 343 insertions(+), 52 deletions(-) create mode 100644 src/layouts/schedule/time-slot-modal-question/timeslot-modal-list-button/timeslot-modal-list-button.vue diff --git a/src/constants/endpoints.js b/src/constants/endpoints.js index 64703d682..92d967f39 100644 --- a/src/constants/endpoints.js +++ b/src/constants/endpoints.js @@ -103,6 +103,11 @@ const endpoints = { mockUrl: "https://mockey.qa.sagaws.net/service/shop-time-slots", // TODO: REMOVE MOCKURL method: "POST", }, + GetMobileEarlyBirdFee: { + url: "/parts/api/v1/parts/mobile-early-bird-fee", + mockUrl: "https://mockey.qa.sagaws.net/service/mobile-early-bird-fee", // TODO: REMOVE MOCKURL + method: "GET", + }, SaveSession: { url: "/order/api/v1/order/save-session", method: "POST", diff --git a/src/constants/store-actions.js b/src/constants/store-actions.js index 019ac2310..b84c004fa 100644 --- a/src/constants/store-actions.js +++ b/src/constants/store-actions.js @@ -32,6 +32,7 @@ const storeActions = { GET_MOBILE_FEE_PART: "getMobileFeePart", GET_SERVICEABILITY_DETAILS: "getServiceabilityDetails", GET_SHOP_TIME_SLOTS: "getShopTimeSlots", + GET_MOBILE_EARLY_BIRD_FEE: "getMobileEarlyBirdFee", SAVE_SESSION: "saveSession", LOAD_SESSION: "loadSession", UPDATE_STORE_WITH_SAVE_SESSION_RESPONSE: "updateStoreWithSaveSessionResponse", diff --git a/src/digital-components/button-question/button-question.vue b/src/digital-components/button-question/button-question.vue index 26288c036..07b837e4e 100644 --- a/src/digital-components/button-question/button-question.vue +++ b/src/digital-components/button-question/button-question.vue @@ -176,6 +176,7 @@ export default { getComponentLoopWrapperClasses() { let classes; switch (this.buttonTypeString) { + case "timeSlotModalListButton": case "listButton": classes = "w-100"; break; diff --git a/src/digital-components/modal/modal.vue b/src/digital-components/modal/modal.vue index 823df0f98..0417e8c7e 100644 --- a/src/digital-components/modal/modal.vue +++ b/src/digital-components/modal/modal.vue @@ -56,13 +56,6 @@ export default { onModalClosedCallback: { type: Function, }, - allowManualFooterDisableOverride: { - type: Boolean, - default: false, - }, - isFooterDisabledManualOverride: { - type: Boolean, - }, }, setup() { const modalId = `modal-${crypto.randomUUID()}`; @@ -105,13 +98,10 @@ export default { }, computed: { isFooterButtonDisabled() { - if (this.allowManualFooterDisableOverride !== null) { - return this.isFooterDisabledManualOverride; - } else if (!this.meta.touched) { + if (!this.meta.touched) { return !this.meta.valid; - } else { - return !this.meta.dirty || !this.meta.valid; - } + } + return !this.meta.dirty || !this.meta.valid; }, }, components: { diff --git a/src/digital-components/text-block/text-block.vue b/src/digital-components/text-block/text-block.vue index 2eb45bf74..4f9c41599 100644 --- a/src/digital-components/text-block/text-block.vue +++ b/src/digital-components/text-block/text-block.vue @@ -1,6 +1,6 @@ @@ -28,6 +28,7 @@ export default { diff --git a/src/mixins/base-mixin.js b/src/mixins/base-mixin.js index 43ce4c132..ab549d273 100644 --- a/src/mixins/base-mixin.js +++ b/src/mixins/base-mixin.js @@ -16,6 +16,7 @@ export default { }, methods: { setCmsContent(cmsContent) { + console.log(cmsContent); this.$root.cmsContentByWidget = cmsContent; }, getCmsContent(widgetName, fieldName) { diff --git a/src/store/index.js b/src/store/index.js index 024f14587..920077ecf 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -1033,7 +1033,18 @@ export const actions = { // logApiCall: false, // }); }, - + getMobileEarlyBirdFee(context) { + const damageType = context.getters.damage.isRepair ? "Repair" : "Replace"; + const paymentType = context.getters.order.payment.isInsurance ? "Insurance" : "Cash"; + return globalMethods.callMockHttpClient({ + method: endpoints.GetMobileEarlyBirdFee.method, + endpoint: `${endpoints.GetMobileEarlyBirdFee.mockUrl}/Cash/Replace`, + }); + // return globalMethods.callHttpClient({ + // method: endpoints.GetMobileEarlyBirdFee.method, + // endpoint: `${endpoints.GetMobileEarlyBirdFee.url}/${paymentType}/${damageType}`, + // }); + }, // Session API Actions saveSession(context) { const vehicle = context.getters.vehicle; From 85b9ce11e2568f3a41d832dd8f2202db5f6998d9 Mon Sep 17 00:00:00 2001 From: Scott Kiener Date: Thu, 18 May 2023 14:33:25 -0400 Subject: [PATCH 06/12] CSR-1137 | Merge conflicts --- .../date-picker/date-picker.vue | 5 +- .../date-picker/mixins/constants.js | 8 +-- src/digital-components/modal/modal.vue | 2 +- src/layouts/schedule/schedule.vue | 62 ++++++++----------- .../time-slot-modal-question.vue | 52 ++++++++++------ .../timeslot-modal-list-button.vue | 6 +- 6 files changed, 68 insertions(+), 67 deletions(-) diff --git a/src/digital-components/date-picker/date-picker.vue b/src/digital-components/date-picker/date-picker.vue index d83050f1a..45a34abbd 100644 --- a/src/digital-components/date-picker/date-picker.vue +++ b/src/digital-components/date-picker/date-picker.vue @@ -306,8 +306,7 @@ export default { const monthsAfterToLoadOffset = 12; // TO BE MADE "CONSTANTS" const monthsBeforeToLoadOffset = 36; // TO BE MADE "CONSTANTS" - - config.initialShopTimeSlotsResponse.forEach((selectableDate) => { + config.initialShopTimeSlotsResponse.days.forEach((selectableDate) => { this.selectableDatesData.push(selectableDate); }); @@ -522,7 +521,7 @@ export default { monthStart, monthEnd ); - moreSelectableDates.forEach((selectableDate) => { + moreSelectableDates.days.forEach((selectableDate) => { const index = this.selectableDatesData.findIndex( (obj) => obj.dateString === selectableDate.dateString ); diff --git a/src/digital-components/date-picker/mixins/constants.js b/src/digital-components/date-picker/mixins/constants.js index b35d324cd..f37e312f5 100644 --- a/src/digital-components/date-picker/mixins/constants.js +++ b/src/digital-components/date-picker/mixins/constants.js @@ -21,10 +21,6 @@ const MONTHS_OF_YEAR = [ "December", ]; -<<<<<<< HEAD:src/constants/scheduling.js -const daysOfWeek = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]; +const DAYS_OF_WEEK = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]; -export { monthsOfYear, daysOfWeek }; -======= -export { TIMINGFUNC_MAP, BUFFER_OFFSET, MONTHS_OF_YEAR }; ->>>>>>> CSR-886:src/digital-components/date-picker/mixins/constants.js +export { TIMINGFUNC_MAP, BUFFER_OFFSET, MONTHS_OF_YEAR, DAYS_OF_WEEK }; diff --git a/src/digital-components/modal/modal.vue b/src/digital-components/modal/modal.vue index 508ca256c..e1f3fb462 100644 --- a/src/digital-components/modal/modal.vue +++ b/src/digital-components/modal/modal.vue @@ -100,7 +100,7 @@ export default { isFooterButtonDisabled() { if (!this.meta.touched) { return !this.meta.valid; - } + } return !this.meta.dirty || !this.meta.valid; }, }, diff --git a/src/layouts/schedule/schedule.vue b/src/layouts/schedule/schedule.vue index 30dd040af..d82f43ea9 100644 --- a/src/layouts/schedule/schedule.vue +++ b/src/layouts/schedule/schedule.vue @@ -46,9 +46,8 @@ :mobileEarlyBirdFee="mobileEarlyBirdFee" :dateAndTimeSlotData="timeSlotsForSelectedDate" :estimatedServiceMinutesMinimum="selectableDatesData.estimatedServiceMinutesMinimum" - :estimatedServiceMinutesMaximum=" - selectableDatesData.estimatedServiceMinutesMaximum" - validationRules="time-slot-selection-required"/> + :estimatedServiceMinutesMaximum="selectableDatesData.estimatedServiceMinutesMaximum" + validationRules="time-slot-selection-required" /> @@ -106,11 +105,11 @@ const getAvailableDates = async (startDate, endDate) => { false ); const newShopTimeSlots = newShopTimeSlotsResponse.data; - return convertApiResponse(newShopTimeSlots.days); + return convertApiResponse(newShopTimeSlots); }; const convertApiResponse = (responseData) => { // DATA CONVERSION - responseData?.forEach((date) => { + responseData?.days.forEach((date) => { const dateString = date.date; date.dateString = dateString; const dateStringPieces = dateString.split("-"); @@ -131,7 +130,6 @@ export default { weatherAlerts: [], mobileEarlyBirdFee: null, TEMPORARYappointmentType: "Inshop", - }; }, async beforeRouteEnter(to, from, next) { @@ -142,19 +140,17 @@ export default { selectableDatesSetting: "custom", initialViewRowsToShow: 5, customSelectableDatesCallback: getAvailableDates, - const earlyBirdPromise = baseMixin.methods.dispatchStoreAction( - storeActions.GET_MOBILE_EARLY_BIRD_FEE - ); - // 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: "EARLY BIRD"} - // ], - // }, - // false - // ); + + // 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: "EARLY BIRD"} + // ], + // }, + // false + // ); /* vvvvv SAVE THESE FOR TESTING PURPOSES FOR NOW vvvvv @@ -173,6 +169,9 @@ export default { */ }); + const earlyBirdPromise = baseMixin.methods.dispatchStoreAction( + storeActions.GET_MOBILE_EARLY_BIRD_FEE + ); const alertReasonsPromise = getAlertReasons(store.getters.order.serviceLocation.zipCodeCtu); // Settle promises and get results @@ -210,6 +209,7 @@ export default { vm.mobileEarlyBirdFee.laborAmount = 15; vm.mobileEarlyBirdFee.sellingPrice = 0; vm.mobileEarlyBirdFee.kitPrice = 0; + vm.selectableDatesData = resultMap.datePickerInitialData.initialShopTimeSlotsResponse; // if (resultMap.earlyBird) { // vm.mobileEarlyBirdFee = resultMap.pricingResults; // } @@ -234,7 +234,7 @@ export default { if (this.selectedDate === null) { return null; } - return this.selectableDatesData.find( + return this.selectableDatesData.days.find( (selectableDate) => selectableDate.dateString === this.selectedDate.dateString ); }, @@ -267,20 +267,12 @@ export default { // NEED TODO - WHAT ARE PAGE REQ'S FOR THIS PAGE? }, async getAvailableDatesMethod(startDate, endDate) { - /* TODO - DO WE NEED TO KEEP AN AGGREGATE OF ALL DATES RETURNED - FOR TIMESLOTS in this.selectableDatesData? IS selectableDatesData EVEN NEEDED? - - // // ADD API CALL RESULTS TO EXISTING DATE DATA - // this.selectableDatesData = this.selectableDatesData.concat( - // this.convertApiResponse(newShopTimeSlots.days) - // ); - // // console.log("this.selectableDatesData is now: ", this.selectableDatesData); - - // // RETURN AGGREGATE DATE DATA - // return this.selectableDatesData; - */ - - return await getAvailableDates(startDate, endDate); + const newShopTimeSlots = await getAvailableDates(startDate, endDate); + // ADD API CALL RESULTS TO EXISTING DATE DATA + this.selectableDatesData.days = this.selectableDatesData.days.concat( + newShopTimeSlots.days + ); + return newShopTimeSlots; }, setData(alertReasonsData) { if (alertReasonsData) { @@ -320,7 +312,7 @@ export default { this.$refs["timeSlotModalQuestion"].openModal(); }, getTimeSlotObjectFromTimeSlotId(timeSlotId) { - const timeSlots = this.selectableDatesData.find( + const timeSlots = this.selectableDatesData.days.find( (selectableDate) => selectableDate.dateString === this.selectedDate.dateString ).timeSlots; return timeSlots.find((timeSlot) => timeSlot.id === timeSlotId); 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 e9bef555e..21b095704 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 @@ -20,10 +20,13 @@ groupName="ChooseTimeSlot" textPosition="text-center" v-model="selectedTimeSlot" - isRequired + isRequired validationRules="time-slot-required" - class="mt-5"/> -
+ class="mt-5" /> +
{ let readableTime; if (this.appointmentType === AppointmentTypeStrings.IN_SHOP) { readableTime = this.getDisplayTextForMilitaryTime(timeslot.startTime); } else if (this.appointmentType === AppointmentTypeStrings.MOBILE) { - readableTime = `${this.getDisplayTextForMilitaryTime(timeslot.startTime)} - ${this.getDisplayTextForMilitaryTime(timeslot.endTime)}`; + readableTime = `${this.getDisplayTextForMilitaryTime( + timeslot.startTime + )} - ${this.getDisplayTextForMilitaryTime(timeslot.endTime)}`; } return { value: timeslot.id, @@ -172,13 +183,16 @@ export default { }; }); } - if (this.appointmentType === AppointmentTypeStrings.MOBILE) { const offerPremium = this.dateAndTimeSlotData.timeSlots[0].offerPremium; const hasEarlyBird = this.mobileEarlyBirdFee?.partType === "EARLY BIRD"; if (offerPremium && hasEarlyBird) { - availableTimeSlots.unshift({value: this.dateAndTimeSlotData.timeSlots[0].id + "-earlybird", buttonLabel: this.earlyBirdButtonText, buttonLabelSubCopy: this.getTotalLineItemPrice(this.mobileEarlyBirdFee)}); + availableTimeSlots.unshift({ + value: this.dateAndTimeSlotData.timeSlots[0].id + "-earlybird", + buttonLabel: this.earlyBirdButtonText, + buttonLabelSubCopy: this.getTotalLineItemPrice(this.mobileEarlyBirdFee), + }); } } return availableTimeSlots; @@ -218,7 +232,7 @@ export default { displayTextForDurationLength = `${durationMinimum} - ${durationMaximum} minutes`; } return displayTextForDurationLength; - } + }, }, components: { modal, diff --git a/src/layouts/schedule/time-slot-modal-question/timeslot-modal-list-button/timeslot-modal-list-button.vue b/src/layouts/schedule/time-slot-modal-question/timeslot-modal-list-button/timeslot-modal-list-button.vue index 1c9c0b360..60b2f9e81 100644 --- a/src/layouts/schedule/time-slot-modal-question/timeslot-modal-list-button/timeslot-modal-list-button.vue +++ b/src/layouts/schedule/time-slot-modal-question/timeslot-modal-list-button/timeslot-modal-list-button.vue @@ -43,9 +43,9 @@ export default { }; }, computed: { - formattedButtonLabelSubCopy() { - return this.buttonLabelSubCopy?.toFixed(2); - } + formattedButtonLabelSubCopy() { + return this.buttonLabelSubCopy?.toFixed(2); + }, }, methods: { displayLoader() { From 1f539e9d792915c2a3b52622b8e443ecf43004fc Mon Sep 17 00:00:00 2001 From: Scott Kiener Date: Thu, 18 May 2023 15:28:18 -0400 Subject: [PATCH 07/12] CSR-1137 | Working version before messing with pricing --- .../date-picker/date-picker.vue | 4 +++ src/layouts/schedule/schedule.vue | 30 +++++++++---------- .../time-slot-modal-question.vue | 3 +- 3 files changed, 21 insertions(+), 16 deletions(-) diff --git a/src/digital-components/date-picker/date-picker.vue b/src/digital-components/date-picker/date-picker.vue index 45a34abbd..c17c6a9ba 100644 --- a/src/digital-components/date-picker/date-picker.vue +++ b/src/digital-components/date-picker/date-picker.vue @@ -45,6 +45,7 @@ type="radio" name="day-of-month" v-model="selectedDate" + @click="fireDateClickedEvent" :value="date.inputValue" :id="`${month.monthLabel}-${date.dateNum.toString()}`" />